本文主要是介绍HTML系列之表格标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

表格存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，**常见显示、展示表格式数据。**因为它可以让数据显示的非常的规整，可读性非常好。

1、table标签

HTML的table元素表示表格数据-------即通过二维数据表表示的信息。

1）基本语法格式

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

2）常见的属性

表格标签table支持全局属性。

下列的border、cellspacing、cellpadding、width、height、align已经废弃，用CSS来代替。

2、thead、tbody、tfoot标签

HTML的<thead>元素定义了一组定义表格的列头的行。（题头）
HTML元素<tfoot>定义了一组表格中各列的汇总行。（脚注）
<tbody>标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。（正文）

1）基本语法格式

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

2）常见的属性

thead标签、tbody标签、tfoot标签支持全局属性。

3）总结

• tbody元素应该与thead和tfoot元素结合起来使用。
• 如果表包含一个<thead>块，则<tbody>块必须在它之后。

3、tr、td、th标签

HTML<tr>元素定义表格中的行。 同一行可同时出现<td>和<th>元素。
HTML<td>元素 定义了一个包含数据的表格单元格。
HTML<th>元素定义表格内的表头单元格。这部分特征是由scope和headers属性准确定义的。

1）基本语法格式

<table>
    <caption>Alien football stars</caption>
    <tr>
        <th scope="col">Player</th>
        <th scope="col">Gloobles</th>
        <th scope="col">Za'taak</th>
    </tr>
    <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
    </tr>
    <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
    </tr>
</table>

2）常见的属性

tr标签、td标签、th标签支持全局属性。

4、表格标题caption

HTML<caption>元素 (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为<table>的第一个子元素出现，同时显示在表格内容的最前面。

1）基本语法格式

<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

2）常见的属性

caption标签支持全局属性。

3）总结

1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2. caption标签必须紧随table标签之后。

5、浏览器兼容性

6、合并单元格

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

1）合并单元格2种方式

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

2）合并单元格的顺序

合并单元格的顺序，我们按照先上后下，先左后右的顺序，跟我们以前学习汉字的书写顺序完全一致。

3）合并单元格的三步曲

1. 先确定是跨行还是跨列合并
2. 根据先上后下，先左右后的原则找到目标单元格，然后写上合并方式，还有要合并的单元格数量
3. 删除多余的单元格

7、总结

1. 表格中由行中的单元格组成。
2. 表格中没有列元素，列的个数取决于行的单元格个数。

微信扫描二维码，关注前端老L

这篇关于HTML系列之表格标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！