普通table表格样式大全

最新推荐文章于 2024-06-22 18:14:38 发布
最新推荐文章于 2024-06-22 18:14:38 发布
阅读量3.8k 收藏 7
点赞数
分类专栏： 杂谈 文章标签： table border div
  普通table表格样式及代码大全(全)

普通table表格样式及代码大全(全)(一)

单实线边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD></TR></TBODY></TABLE>

虚线边框表格

<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

点线边框表格

<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD></TR></TBODY></TABLE>

双实线边框表格

<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD></TR></TBODY></TABLE>

槽线边框表格

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD></TR></TBODY></TABLE>

脊线边框表格

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD></TR></TBODY></TABLE>

内凹效果边框

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD></TR></TBODY></TABLE>

外凸效果边框

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD></TR></TBODY></TABLE>

内虚外实边框

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>

外虚内实边框

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

 

无边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

隐藏下边框

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隐藏下边框</TD></TR></TBODY></TABLE>

隐藏上边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隐藏上边框</TD></TR></TBODY></TABLE>

隐藏左边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隐藏左边框 </TD></TR></TBODY></TABLE>

隐藏右边框

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隐藏右边框 </TD></TR></TBODY></TABLE>

隐藏左右边框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隐藏左右边框 </TD></TR></TBODY></TABLE>

隐藏上下边框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隐藏上下边框</TD></TR></TBODY></TABLE>

只显示上边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TD height=40>只显示上边框</TD></TR></TBODY></TABLE>

只显示下边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>
<TBODY>
<TR align=middle>
<TD height=40>只显示下边框</TD></TR></TBODY></TABLE>

只显示左边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TD height=40>只显示左边框</TD></TR></TBODY></TABLE>

只显示右边框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>
<TBODY>
<TR align=middle>
<TD height=40>只显示右边框</TD></TR></TBODY></TABLE>

不显示任何边框

<TABLE borderColor=#ff6600 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>
<TBODY>
<TR align=middle>
<TD height=40>不显示任何边框</TD></TR></TBODY></TABLE>

单行单列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD height=40>
<DIV align=center>单行单列</DIV></TD></TR></TBODY></TABLE>

一行多列

一行多列

一行多列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD></TR></TBODY></TABLE>

一列多行

一列多行

一列多行

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR></TR></TBODY></TABLE>

 

原文：http://apps.hi.baidu.com/share/detail/39230164

xxg3053
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 自定义表格样式,最简单导出table为excel表格并自定义表格样式
weixin_40007804的博客
06-16 793
普通方式下包npm i -S file-saver xlsx在util文件夹新建类建立to_xlsx.jsimport FileSaver from ‘file-saver‘;import XLSX2 from ‘xlsx‘;class ToXlsx {// id指的是绑定数据的table的id，// title指的是导出表格的名称，记得带后缀xlsx，例如：title=‘重复导.xlsx‘;co...
el-table使用与样式修改大全
happy81997的博客
11-14 9344
Element-UI,el-table样式修改大全 开篇：修改element的样式的时候style标签不能加上scoped所以为了防止修改的样式影响到别的页面，建议在当前页面加一个id,修改时带上id，或者在样式前面加上 /deep/ ，控制修改的权限范围 <template> <div id="top"> </div> </template...
普通table表格样式及代码大全(全)
dududu01的专栏
08-27 3566
普通table表格样式及代码大全(全) 普通table表格样式及代码大全(全)(一) 单实线边框表格 单实线边框表格 虚线边框表格 虚线边
table表格模板pc端
m0_64740409的博客
05-24 636
提现单号 :{{ tableList.withdrawalNumber }}手机号 :{{ tableList.phone }}真实姓名
普通table表格样式及代码大全
bangxionger9224的博客
03-15 805
普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1> <tbody> ...
HTML的表格样式
Raccon_的博客
11-22 1242
HTML5 表格 <table> <tr> <th>1</th>(th为列标题 自动加粗居中) <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 属性: 宽度:width 高度:
普通table表格样式及代码大全(全)(二)
穷途有路，绝处永生
11-23 932
多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 多行多列 合并
Antd Table 表格 拖拽列宽
芝芝为荔枝
06-22 581
在实际的应用中，Table组件直接再次封装为可以拖动的组件供所有人使用，而且拖动后的布局是可以本地存储的，或者用接口去存也是一样，实现效果如下下面是实现的具体代码，封装了一个MyTable 组件，在这个组件中可以自定义antd Table组件的交互样式等。
CSS 之 table 表格布局
weixin_45092437的博客
10-09 8967
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
html中table的表格样式
05-24
本文将深入探讨HTML中的表格样式，包括基本语法、样式控制以及一些高级技巧。 首先，一个基本的表格由多个部分组成，如`<table>`, `<tr>`, `<th>`, `<td>`等。`<table>`定义了整个表格，`<tr>`表示表格行，`<th>`是...
table-rowspan表格自动合并单元格插件
11-07
8. **CSS样式**：为了使表格看起来更美观，插件可能还会涉及到CSS样式调整，如边框、填充、对齐方式等，以确保合并单元格后的视觉效果。 9. **浏览器兼容性**：考虑到不同的浏览器可能对某些特性支持不同，开发插件...
div css汽车销售表格样式代码
06-24
1. **表格样式**：使用 `table` 标签创建表格，通过 `table`、`th`（表头单元格）、`td`（普通数据单元格）等选择器，定制表格的基本样式，如边框、内边距、背景色等。对于汽车销售数据，可能需要设置合适的宽度来...
CSS display属性的table表格布局
09-24
如果需要完全控制表格样式和布局，`display: table` 提供了更多灵活性。然而，如果考虑语义化和无障碍性，使用 `<table>`、`<thead>`、`<tbody>` 等HTML表格元素通常是更好的选择。此外，现代前端框架和库如...
骨折多区域X线图片资料数据集
08-02
骨折多区域X线图片资料数据集 数据说明： 该数据集包含10，580张射线图像(X射线)数据。 培训数据 图片数量:9246 验证数据 图片数量:828 测试数据 图片数量:506
[毕业设计]JAVA实现的局域网监听与审计系统(源代码+论文).zip
08-02
[毕业设计]JAVA实现的局域网监听与审计系统(源代码+论文)
Kimsuky 的⽹络钓⻥有效载荷战术中文版.pdf
最新发布
08-02
Kimsuky 的⽹络钓⻥有效载荷战术中文版.pdf
bootstraptable 手册_bootstrap table表格使用方法详解
06-09
Bootstrap Table 是一个功能强大的开源 jQuery 插件，它可以将简单的 HTML 表格转换为功能丰富、易于使用且可扩展的 Bootstrap 样式表格。下面是 Bootstrap Table 的使用方法： 1. 引入相关文件：在 HTML 文件中引入 jQuery 和 Bootstrap 的相关文件以及 Bootstrap Table 的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> ``` 2. 创建 HTML 表格：在 HTML 文件中创建一个普通的表格。 ```html <table id="myTable"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table> ``` 3. 初始化 Bootstrap Table：在 JavaScript 中使用 Bootstrap Table 插件来初始化表格。 ```javascript $(function() { $('#myTable').bootstrapTable(); }); ``` 此时，你就可以看到一个基本的 Bootstrap Table 表格了。你可以根据自己的需要进行配置和定制，以下是一些常用的配置选项： - `data-url`：指定从服务器加载数据的 URL。 - `data`：指定表格的数据，可以是一个数组或一个 URL。 - `columns`：定义表格的列，可以包含列的名称、数据字段、格式化函数等。 - `search`：启用搜索功能。 - `pagination`：启用分页功能。 - `sortable`：启用排序功能。 - `showExport`：启用导出功能。 以上是 Bootstrap Table 的基本使用方法和常用配置选项，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值