【Web前端】HTML—4.表格标签

一、表格的主要作用

表格主要用于显示、展示数据，可以让数据显示的非常规整，有条理，可读性非常好。特别是后台展示数据时候，能够熟练运用表格就显得很重要。
即：表格不是用来布局页面的，而是用来展示数据的。

二、表格的基本语法

<table>
  <tr>
     <td>单元格内的文字</td>
     ```
     </tr>
     ```
</table>

1、<table></table>是用于定义表格的标签。
2、<tr></tr>标签用于定义表格中的行，必须嵌套在<table></tr>标签中。
3、<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4、字母td指表格数据（table data），即数据单元格的内容。
示例：

<table>
      <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
      <tr><td>AAA</td> <td>男</td> <td>21</td></tr>
      <tr><td>BBB</td> <td>男</td> <td>43</td></tr>
  </table>

效果为：

三、表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签标示HTML表格的表头部分（tablehead的缩写）

<table>
  <tr>
      <th>姓名</th>
     <td>单元格内的文字</td>
     ```
     </tr>
     ```
</table>

示例：

<table>
      <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
      <tr><td>AAA</td> <td>男</td> <td>21</td></tr>
      <tr><td>BBB</td> <td>男</td> <td>43</td></tr>
  </table>

效果为：

四、表格属性

表格标签这部分属性在实际开发中不常用，后面通过CSS来设置。
属性标签要写到table标签里面去。

五、表格结构标签

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

六、合并单元格

1、合并单元格方式：

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

2.目标单元格：（写合并代码）

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

3.合并单元格步骤
（1）先确定是跨行还是跨列合并
（2）找到目标单元格，写上“合并方式=合并的单元格数量”。
示例：<td colspan = “2”> </td>
（3）删除多余单元格
示例：

<!--合并单元格-->
    <table width="500 " height="249 " border="1 " cellspacing="0 ">
        <tr>
            <td></td>
            <td colspan="2 "></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    

效果为：

最后

以上就是失眠玫瑰为你收集整理的【Web前端】HTML—4.表格标签的全部内容，希望文章能够帮你解决【Web前端】HTML—4.表格标签所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。