html表格标签的基本使用

表格标签的基本使用

表格

表格用于展示数据的。

表格的基本语法由三组标签组成，有行的概念没有列的概念。

表格的框架：

<table>
  <!-- 第一行 -->
  <tr>
    <td>姓名</td><td>性别</td><td>电话</td>
  </tr>
  <!-- 第二行 -->
  <tr>
    <td>小明</td><td>男</td><td>11011</td>
  </tr>
  <!-- 第三行 -->
  <tr>
    <td>小红</td><td>女</td><td>12011</td>
  </tr>
</table>

表头单元格

为了突出第一行或第一列我们可以使用表头单元格标签。

它会将单元格里面的文本内容加粗居中显示。

<th>标签表示表头部分(table head)

<table>
  <tr>
  	<th>姓名</th><th>性别</th><th>电话</th>
    <tr><td>小明</td><td>男</td><td>11011</td></tr>
  	<tr><td>小红</td><td>女</td><td>12011</td></tr>
  </tr>
</table>

表格结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体。

    <table>
        <thead>
          <tr>
                <th>姓名</th><th>性别</th><th>电话</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td><td>男</td><td>11011</td>
            </tr>
            <tr>
                <td>小红</td><td>女</td><td>12011</td>
            </tr>
        </tbody>
    </table>

表格的相关属性

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格是否有边框，默认为""
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认为1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素。一般我们设置为0
width	像素值或百分比	规定表格的宽度

合并单元格

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

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

目标单元格

跨行：最上侧单元格为目标单元格，写合并代码。

跨列：最左侧单元格为目标单元格，写合并代码。

⚠️：多余的单元格直接删除即可，不需要写那一格的代码。

<table>
        <thead>
            <tr>
                <th colspan="3">表格</th>
            </tr>
          <tr>
                <th>姓名</th><th>性别</th><th>电话</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td><td>男</td><td>11011</td>
            </tr>
            <tr>
                <td>小红</td><td>女</td><td>12011</td>
            </tr>
        </tbody>
    </table>