表格标签

1.表格标签

1.1 表格作用

在web页面中，表格通常用于展现数据，一个清爽简洁的表格非常有利于展示数据内容。

1.2 表格标签内容

• table :用于指定表格
• tr：用于指定表格行
• td：用于指定表格每行单元格内容
• th：用于定义表头单元格，可使表头内容加粗、居中显示
• thead： 用于指定表头区域，使表格结构更为清晰
• tbody： 用于指定表格主体，使表格结构更为清晰

<table align="left" border="1" cellpadding="20" cellspacing="0" width="500">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th colspan="2">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>朱大肠</td>
      <td>59</td>
      <td>男</td>
      <th>金梅</th>
    </tr>
    <tr>
      <td rowspan="2">朱大肠</td>
      <td>60</td>
      <td>男</td>
      <th>金梅</th>
    </tr>
    <tr>
      <td>60</td>
      <td>男</td>
      <th>金梅</th>
    </tr>
  </tbody>
</table>

1.3 表格属性

• align: 用于指定表格在网页中的显示位置.居中：center,靠左：left,靠右：right。
• border: 用于指定表格边框宽度
• cellpadding：用于指定单元格内元素内容距离左边框的距离
• cellspacing：用于指定表格单元格间距
• width：用于指定表格宽度
• height：用于指定表格高度

1.4 合并单元格

1.4.1 分类

• 跨行合并 rowspan（指定要合并的单元格的个数）
• 跨列合并 colspan（指定要合并的单元格的个数）

1.4.2 步骤

• 1.确定合并类型
• 2.确定合并目标单元格(1.跨行合并：从上往下第一个 2.跨列合并：从左往右第一个)
• 3.删除多余单元格