这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

需要提前说明的一点是，关于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" class="my-table">

但 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均可以。

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