07. 表格

<table>

一个基本的表格：

<table>
  <caption>table title</caption>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>1-2</td>
      <td>1-3</td>
    </tr>
    <tr>
      <td>2-2</td>
      <td>2-3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合计</td>
      <td>x</td>
    </tr>
  </tfoot>
</table>

• 表格的每一行使用 <tr>
• 表格中的每一个单元格使用 <td>，<td> 单元格必须嵌套在 <tr> 行标签内
• 表格中的 <th>：是一种特殊的 <td>，表示标题，有些默认的样式
• 标题 <th> 和单元格 <td> 有 colspan 和 rowspan 属性，分别表示这个单元格宽度跨多少列和高度跨多少行
• 表格的标题：<caption>
• <thead>，<tbody>，<tfoot>：作为表格几部分的区分，不会对布局和样式造成影响

表格的一些基本样式：

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
  padding: 10px 20px;
}