HTML-表格

一、表格定义

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </table>

运行结果：

二、表格常用属性

1.表格和边框属性

如果不定义边框属性，表格将不显示边框。但是大多数时候，我们希望显示边框。

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

使用边框属性来显示一个带有边框的表格：
运行结果：

大对数情况下我们并不希望我们表格的边框是这样的，所以我们可以利用cellspacing属性来增加或减小单元格之间的间距
运行结果：

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

2.表格和cellpading属性：

此属性是用来设置每个单元格的内容与单元格边框的距离

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

运行结果：

3.表格的表头

表格的表头使用 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

 <table border="1" cellspacing="0">
    <tr>
      <th>主题一</th>
      <th>主题二</th>
    </tr>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
    </tr>
  </table>

运行结果：

4.跨行或跨列的单元格

（1）跨列单元格

<table border="1" cellspacing="0">
    <tr>
      <th>姓名</th>
      <th colspan="2">电话号</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>123456</td>
      <td>456789</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>111111</td>
      <td>222222</td>
    </tr>
  </table>

运行结果：

（2）跨行单元格

<table border="1" cellspacing="0">
    <tr>
      <th>姓名</th>
      <td>张三</td>
    </tr>
    <tr>
      <th rowspan="2">电话</th>
      <td>123456</td>
    </tr>
    <tr>
      <td>222222</td>
    </tr>
  </table>

运行结果：

5.在表格中排列内容（align属性）

<table border="1" cellspacing="0" width="600">
    <tr>
      <th>主题一</th>
      <th colspan="2">主题二</th>
    </tr>
    <tr>
      <td align="left">第一行第一列</td>
      <td align="right">第一行第二列</td>
      <td align="right">第一行第三列</td>
    </tr>
    <tr>
      <td align="left">第二行第一列</td>
      <td align="right">第二行第二列</td>
      <td align="right">第二行第三列</td>
    </tr>
  </table>

运行结果：

三、表格标签