09-HTML 中的表格

HTML 表格

1、表格标签table

• table 标签中的内容

  • thead 标签

    定义表格的头部

  • tbody 标签

    定义表格的主体

  • tr 标签

    定义表格的行

  • th 和 td 标签

    定义表格列

    th 标签 用在thead里边代理td，具有加粗的效果

    td 标签 一般用在tbody里边

  例

    <table>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>
  

2、表格中 列合并 和 行合并

• 列合并 属性

  colspan=""

• 行合并 属性

  rowspan=""

这些属性使用在列中（td 标签 或 th 标签中）

 <table>
    <tr>
      <!-- colspan 合并列  rowspan 合并行-->
      <td colspan="2">1-1</td>
      <td>1-3</td>
      <td>1-4</td>
      <td>1-5</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td rowspan="3" colspan="2">2-2</td>
      <td rowspan="2">2-4</td>
      <td>2-5</td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-5</td>
    </tr>
    <tr>
      <td>4-1</td>
      <td>4-4</td>
      <td>4-5</td>
    </tr>
    <tr>
      <td>5-1</td>
      <td>5-2</td>
      <td>5-3</td>
      <td>5-4</td>
      <td>5-5</td>
    </tr>
  </table>

效果展示

表格的一些基本样式属性样式

• <table border="1px" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>