HTML表格基础

HTML表格基础

一、表格相关标签

1. <table> </table>：表格相关的内容都需要包含在该标签内。

2. <tr> </tr> ：table row的缩写，创建一行。

3. <td> </td>：table data的缩写，创建一行中的一列。

4. <th> </th>：table head的缩写，类似<td> </td>，创建一行中的一列，用于表头的标题内容。

5. <caption> </caption>：整个表格的标题

二、实例展示

例1：普通表格

  <table>               <!-- 创建了一个表格 -->
    <tr>                <!-- 创建了表格的第一行 -->
      <caption>例1：普通表格</caption>
      <td>内容一</td>    <!-- 创建了表格的第一行，第1列 -->
      <td>内容二</td>    <!-- 创建了表格的第一行，第2列 -->
      <td>内容三</td>    <!-- 创建了表格的第一行，第3列 -->
    </tr>
    <tr>                <!-- 创建了表格的第二行 -->
      <td>内容四</td>    <!-- 创建了表格的第二行，第1列 -->
      <td>内容五</td>    <!-- 创建了表格的第二行，第2列 -->
      <td>内容六</td>    <!-- 创建了表格的第二行，第3列 -->
    </tr>
  </table>

例1效果如下（*表格已添加边框）：

例1：普通表格

内容一	内容二	内容三
内容四	内容五	内容六

例2：表格的标题在一行

  <table>               <!-- 创建了一个表格 -->
    <caption>例2：表格的标题在一行</caption>
    <tr>                <!-- 创建了表格的第一行 -->
      <th>标题一</th>    <!-- 创建了表格的第一行，第1列，标题一 -->
      <th>标题二</th>    <!-- 创建了表格的第一行，第2列，标题二 -->
      <th>标题三</th>    <!-- 创建了表格的第一行，第3列，标题三 -->
    </tr>
    <tr>                <!-- 创建了表格的第二行 -->
      <td>内容一</td>    <!-- 创建了表格的第二行，第1列，内容一 -->
      <td>内容二</td>    <!-- 创建了表格的第二行，第2列，内容二 -->
      <td>内容三</td>    <!-- 创建了表格的第二行，第3列，内容三 -->
    </tr>
  </table>

例2效果如下（*表格已添加边框）：

  

例2：表格的标题在一行

标题一	标题二	标题三
内容一	内容二	内容三

例3：表格的标题在一列

  <table>               <!-- 创建了一个表格 -->
    <caption>例3：表格的标题在一列</caption>
    <tr>                <!-- 创建了表格的第一行 -->
      <th>标题一</th>    <!-- 创建了表格的第一行，第1列，标题一 -->
      <td>内容一</td>    <!-- 创建了表格的第一行，第2列，内容一 -->
    </tr>
    <tr>                <!-- 创建了表格的第二行 -->
      <th>标题二</th>    <!-- 创建了表格的第二行，第1列，标题二 -->
      <td>内容二</td>    <!-- 创建了表格的第二行，第2列，内容二 -->
    </tr>
    <tr>                <!-- 创建了表格的第三行 -->
      <th>标题三</th>    <!-- 创建了表格的第三行，第1列，标题三 -->
      <td>内容三</td>    <!-- 创建了表格的第三行，第2列，内容三 -->
    </tr>
  </table>

例3效果如下（*表格已添加边框）：

例3：表格的标题在一列

标题一	内容一
标题二	内容二
标题三	内容三