美文网首页
HTML 表格

HTML 表格

作者: Shorebloom_59f6 | 来源:发表于2018-09-14 14:07 被阅读0次

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1. 表格和边框属性

如果不定义边框属性，表格将不显示边框。边框属性为border

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
</table>

2. 表格表头

表格的表头使用 <th> 标签进行定义，通常表头文字会加粗显示。
例如：

<tr>
    <th><b>表头第一列</b></th>
    <th><b>表头第二列</b></th>
  </tr>

3. 单元格跨列

需要在表头中使用colspan属性

<table border="1">
  <tr>
    <th><b>姓名</b></th>
    <th colspan="2"><b>电话号</b></th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>123</td>
    <td>456</td>
  </tr>
</table>

效果：


单元格跨两列.jpg

4. 单元格跨行

需要在表头中使用rowspan属性

<table border="1">
  <tr>
    <th><b>姓名</b></th>
    <td>Tom</td>
  </tr>
  <tr>
    <th rowspan="2"><b>电话号</b></th>
    <td>123</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
</table>

效果：


单元格跨两行.jpg

相关文章