表格标签

　表格的基础语法

    <table>
      <tr>
        <th>姓名</t>
        <th>性别</t>
        <th>年龄</t>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>20</td>
      </tr>
    </table>

实际效果:

姓名 性别 年龄
张三 男 18
李四 女 20
  • <table></table>是用于定义表格的标签。
  • <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
  • <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  • 字母td指表格数据（tabledata），即数据单元格的内容。

  • <th>标签表示HTML表格的表头部分（tablehead的缩写）,其中的内容会加粗居中显示.

    　表格的额外属性

    了解即可,后期使用CSS操控表格属性较多.

    属性名属性值描述
    alignleft、center、right规定表格相对周围元素的对齐方式。
    border1或 ＂＂规定表格单元是否拥有边框，默认为＂＂，表示没有边框
    cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素。
    cellspacing像素值规定单元格之间的空白，默认2像素。
    width像素值或百分比规定表格的宽度。

    表格结构标签

    分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.这样可以更好的分清表
    格结构。没有实际意义,和div类似,只是起到一个方便阅读的作用.

    合并单元格

    合并单元格方式：

  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数”
  • 先确定是跨行还是跨列合并。
  • 找到目标单元格.写上合并方式=合并的单元格数量。比如：<td colspan=“2”></td>

  • 删除多余的单元格。

      <table>
    <tr>
      <th>111</th>
      <th colspan="2">222</th>
    </tr>
      <td rowspan="2">444</td>
      <td>555</td>
      <td>666</td>
    </tr>
    <tr>
      <td>
        888
      </td>
      <td>
        999
      </td>
    </tr>
  </table>

    实际效果:

    111 222
    444 555 666
    888 999