<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>
  • 表格中的每一个单元格使用 <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;
}