HTML 简明教程 ( HTML5 标准 ) - 表格 ( table )

HTML 中的表格由 <table> 标记定义

每个表格都有几行 ( 由 <tr> 标签定义 ) ，每行分为单元格 ( 由 <td> 标签定义 )

字母「 td 」代表「 table data 」( 表格数据 )，它是数据单元的内容

数据单元格可以包含文本，图片，列表，段落，表格，水平线，表格等等

表格边框

我们可以使用 border 属性设置表格的边框，例如

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
</table>

我们还可以使用 CSS 样式的 border 属性设置表格的边框，例如

<style>
table {
    border: 1px solid black;
}
</style>
<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
</table>

设置单元格之间的边距

我们可以使用 cellpadding 属性设置单元格的边距

默认情况下，浏览器不会向单元格添加边距，因此需要手动执行此操作，例如

<table border="1" cellpadding="10">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
</table>

我们还可以使用 CSS 中的 padding 属性设置单元格的边距，例如

th, td {
    padding: 10px;
}

设置单元格之间的空间

我们可以使用 cellspacing 属性设置单元格之间的空间，例如

<table border="1" cellspacing="10">
<tr>
  <td>第一</td>
  <td>行</td>
</tr>
<tr>
  <td>第二</td>
  <td>行</td>
</tr>
</table>

使用 colspan 属性跨越多列

我们可以使用 colspan 属性跨越多列

<table style="width:100%">
  <tr>
    <th>姓名</th>
    <th colspan="2">电话号码</th>
  </tr>
  <tr>
    <td>李白</td>
    <td>88451216</td>
    <td>88451215</td>
  </tr>
</table>

使用 rowspan 属性跨越多行

我们可以使用 rowspan 属性设置跨越两行

<table style="width:100%">
  <tr>
    <th>姓名:</th>
    <td>李白</td>
  </tr>
  <tr>
    <th rowspan="2">电话号码:</th>
    <td>88451216</td>
  </tr>
  <tr>
    <td>88451215</td>
  </tr>
</table>

<caption> 标记标签

<caption> 标签定义表格的标题，例如

<table style="width:100%">
  <caption>月度账单</caption>
  <tr>
    <th>月份</th>
    <th>账单</th>
  </tr>
  <tr>
    <td>6月</td>
    <td>$85</td>
  </tr>
  <tr>
    <td>7月</td>
    <td>$128</td>
  </tr>
</table>

<th> 标记标签

<th> 标记标签用于定义表格的列标题，大多数浏览器中，列标题显示为 粗体居中文本

<table border="1">
    <tr>
        <th>标题 1</th>
        <th>标题 2</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>