HTML基础03-HTML标签（下）01-表格标签

03-HTML标签（下）

01-表格标签

表格标签是在实际开发中非常常用的标签

1.1表格的主要作用

表格主要是用来显示、展示数据的，因为它可以让数据显示的非常规整，具有良好的可读性。特别是在后台展示数据时，熟练运用表格就显得尤为重要。一个清爽简约的表格能够把繁杂的数据表现的条理有序。

1.2表格的基本语法

<table>
    <tr>
        <td>单元格1</td> <td>单元格2</td> <td>单元格3</td>
    </tr>
    <tr>
    	<td>单元格4</td> <td>单元格5</td> <td>单元格6</td>
    </tr>
    ...
</table>

1. <table></table>是用于定义表格的标签
2. <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>中
3. <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>中
4. 单元格<td></td>中可以放任何元素，图片、文字、超链接等都可以

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th></th>标签表示HTML表格的表头部分（table head的缩写）

<table>
    <tr>
    	<th>姓名</th> <th>年龄</th> <th>学校</th>
        ...
    </tr>
    ...
</table>

1.4表格属性

表格标签的属性在实际开发中不常用，后面会通过CSS来设置

属性名	属性值	说明
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

代码演示

<table align="left" border="1" cellspacing="0" cellpadding="10" width="300" height="40">
    <tr>
        <th>姓名</th> <th>年龄</th> <th>学校</th>
    </tr>
    <tr>
        <td>李华</td> <td>20</td> <td>第二中学</td>
    </tr>
    <tr>
        <td>大明</td> <td>19</td> <td>第六中学</td>
    </tr>
</table>

1.5案例演示

<!-- 小说排行榜案例 -->
<table align="center" border="1" cellspacing="0" width="500" height="160">
    <thead>
        <tr>
            <th>排名</th> <th>关键字</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td> <td>鬼吹灯</td> <td>↓</td> <td>3405</td> <td>25420</td>
            <td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href="https://baike.baidu.com/item/%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E/4080601?fr=aladdin">百科</a></td>
        </tr>
        <tr>
            <td>2</td> <td>法医秦明</td> <td>↑</td> <td>3203</td> <td>24484</td>
            <td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
        </tr>
        <tr>
            <td>3</td> <td>守夜者</td> <td>↑</td> <td>2903</td> <td>20484</td>
            <td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
        </tr>
        <tr>
            <td>4</td> <td>河神</td> <td>↑</td> <td>3203</td> <td>196484</td>
            <td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
                <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
        </tr>
    </tbody>
</table>

1.6表格结构标签

使用场景：因为表格可能很长，为了更好的表示出表格的语义，可以将表格分割为表格头部和表格主体两大部分。在表格标签中分别用<thead>标签表示表格头部区域，用<tbody>标签表示表格的主体区域，这样可以更好的分清表格结构。

<thead></thead>与<tbodt></tbody>的使用可以查看上述小说排行案例

1.7合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

• 合并单元格方式

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

• 目标单元格（编写合并代码的位置）

  • 跨行合并：最上侧单元格为目标单元格，编写合并代码
  • 跨列合并：最左侧单元格为目标单元格，编写合并代码

• 合并步骤

  • 确定合并方式是跨行还是跨列合并
  • 找到目标单元格 编写合并代码
  • 删除多余单元格

• 代码演示

  <!-- 合并前 -->
  <table align="left" border="1" cellspacing="0" cellpadding="10" width="300" height="40">
      <tr>
          <th>姓名</th> <th>年龄</th> <th>学校</th>
      </tr>
      <tr>
          <td>李华</td> <td>20</td> <td>第二中学</td>
      </tr>
      <tr>
          <td>大明</td> <td>19</td> <td>第六中学</td>
      </tr>
  </table>
  <!-- 合并后 -->
  <table align="left" border="1" cellspacing="0" cellpadding="10" width="300" height="40">
      <tr>
          <th>姓名</th> <th>年龄</th> <th>学校</th>
      </tr>
      <tr>
          <td  rowspan="2">李华</td> <td>20</td> <td>第二中学</td>
      </tr>
      <tr>
          <td>19</td> <td>第六中学</td>
      </tr>
  </table>