阅读 83

关于HTML中table的几个关键点,你应该知道的

需要提前说明的一点是,关于table的样式,统一建议使用css实现,大多数table标签的属性已经被废弃,只是浏览器兼容还可以使用。

比较完整的table标签有哪些?

如下,是一个比较完整的table及其子标签,其中 <caption><colgroup><thead><tfoot> 等都是可选的。不严格的情况下<tbody>也可以省略,直接使用 tr 行,浏览器会在渲染时自动添加上tbody

<colgroup> 用来对列进行分组,并应用相同的样式。不常用

<table class="my-table">     <caption>table标题</caption>     <colgroup>         <col span="2" class="batman">         <col>         <col span="2" class="flash">     </colgroup>   <thead>     <tr>       <th>head-1</th>       <th>head-2</th>       <th>head-3</th>       <th>head-4</th>       <th>head-5</th>     </tr>   </thead>   <tfoot>     <tr>       <td>footer</td>       <td>1</td>       <td>2</td>       <td>3</td>       <td>4</td>     </tr>   </tfoot>   <tbody>     <tr>       <td>row-1-cell-1</td>       <td>row-1-cell-2</td>       <td>row-1-cell-3</td>       <td>row-1-cell-4</td>       <td>row-1-cell-5</td>     </tr>     <tr>       <td>row-2-cell-1</td>       <td>row-2-cell-2</td>       <td>row-2-cell-3</td>       <td>row-2-cell-4</td>       <td>row-2-cell-5</td>     </tr>   </tbody> </table> 复制代码

.colgroup-1{     background-color: fuchsia; } .colgroup-2{     background-color:darkorange; } 复制代码

如下,为显示的表格

<thead>中也可以直接使用td。并不严格区分。

标签说明
<th>定义表格的表头,大多数浏览器会把表头显示为粗体居中的文本
<tr>定义表格的行
<td>定义表格单元

th 可以改为垂直,作为tr每行的第一个元素即可

垂直表头示例:

   <tr>       <th>表头一</th>       <td>100</td>    </tr>    <tr>       <th>表头二</th>       <td>200</td>    </tr>    <tr>       <th>表头三</th>       <td>300</td>    </tr> 复制代码

指定边框

  • 为整个表格添加边框

.my-table{   border: #000 solid 1px; } 复制代码

  • 单元格指定边框

.my-table td,.my-table th{     border: #000 solid 1px; } 复制代码

.my-table,.my-table tfoot, .my-table td,.my-table th{     border: #000 solid 1px; } 复制代码

也可以直接 <table border="1"> 添加表和单元格边框,但是不建议。

后面的演示,在HTML中取消了 <colgroup> 分组列。

单元格间距(单元格与单元格的距离)

从上可以看到,单元格之间的间距,导致单元格双边框,在table上指定 cellspacing 属性为0即可消除双边框。

<table cellspacing="0">

cellspacing 同样已经被废弃。

同样的效果,可以借助 css的border-spacing 实现。

.my-table{     border-spacing:0;     /* border-collapse: collapse; */ } 复制代码

或者边框合并属性 border-collapse: collapse;

表格内容边距

设置表格单元内容与边框的边距为0.

.my-table{     border-collapse: collapse; } .my-table td{     padding:0; } 复制代码

设置表格内容边距的 table属性 为cellpadding<table cellpadding="0">

cellpadding也是一个遗弃的属性,它的设置替代方案是,通过在 <table> 上添加 border-collapse: collapse; 的css属性,<td> 上使用 padding 属性实现。

单元格跨行跨列

  • colspan 水平合并 向右合并 即实现跨列。

  • rowspan 垂直合并 向下合并 即实现跨行。

<tbody>   <tr>     <td rowspan="2">row-1-cell-1</td>     <td colspan="3">row-1-cell-2</td>     <td>row-1-cell-5</td>   </tr>   <tr>     <td>row-2-cell-2</td>     <td colspan="2">row-2-cell-3</td>     <td>row-2-cell-5</td>   </tr> </tbody> 复制代码

单元格跨行跨列失效问题(重要)

有的时候设置colspan或rowspan不起作用,即无法实现跨行跨列。

  • 方法1:指定td宽高

最简单的办法是给单个td指定宽度,因为跨行跨列是基于单元格对比的,在指定单个td的宽高后,就可以显示出跨行跨列

如果 td 的 width 宽度指定百分比,大多数情况下无效。

  • 方法2:<table> 标签指定 table-layout: fixed;

在不指定td宽高时,可以在给 <table> 设置css属性 table-layout: fixed;,使colspan 或 rowspan 起作用。

有时候指定 table-layout 也无效(在一个td中使用跨列的table时有遇到),此时再加上 <thead><tr> 标签就可以解决,<thead><tr> 内部是否有td或th均可以。


作者:代码迷途
链接:https://juejin.cn/post/7028734036696629261


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐