6. 表格标签

M_qsqsqsq

已于 2022-06-11 00:39:24 修改

阅读量454

点赞数

分类专栏： HTML 学习文章标签： css css3 html

于 2022-06-11 00:37:45 首次发布

本文链接：https://blog.csdn.net/weixin_42118352/article/details/125230209

版权

HTML 学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了表格在网页开发中的关键作用，包括其用于清晰呈现数据的特性，基本语法（如`<table>`、`<tr>`、`<th>`和`<td>`）的使用，属性设置，以及如何通过`<thead>`和`<tbody>`区分头部和主体。还详细讲解了合并单元格的方法，适合初学者理解和实践。

摘要由CSDN通过智能技术生成

6. 表格标签

6.1 表格的主要作用

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

总结：表格不是用来布局页面的，而是用来展示数据的.

6.2 表格的基本语法

<table>
    <tr><th>第1列表头</th> <th>第2列表头</th>...</tr>
    <tr><td>第1行第1列单元格</td> <td>第1行第2列单元格</td>...</tr>
    <tr><td>第2行第1列单元格</td> <td>第2行第2列单元格</td>...</tr>
    <tr><td>第3行第1列单元格</td> <td>第3行第2列单元格</td>...</tr>
    ...
</table>

<th></th>是用于表头单元格标签 , 加粗居中 , table head缩写;
<table></table>是用于定义表格的标签;
<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中;
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中;
字母td指表格数据(table data), 数据即数据单元格的内容;

6.3 表格的属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置.

此处学习表格属性目的有2个：

记住这些英语单词，后面CSS会使用.
直观感受表格的外观形态

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

注:

cellspacing 通常设置为0 , 这样单元格之间不会有间隙
通常只设置宽或者 , 会按照等比例缩放

6.4 表格结构标签

使用场景：因为表格可能很长为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分：

在表格标签中，分别用：<thead></thead>标签表格的头部区域、<tbody></tbody>标签表格的庄体区域。这样可以更好的分清表格结构。
请添加图片描述

<table>
<thead>
    <tr><th>第1列表头</th> <th>第2列表头</th>...</tr>
</thead>
<tbody>
    <tr><td>第1行第1列单元格</td> <td>第1行第2列单元格</td>...</tr>
    <tr><td>第2行第1列单元格</td> <td>第2行第2列单元格</td>...</tr>
    <tr><td>第3行第1列单元格</td> <td>第3行第2列单元格</td>...</tr>
    ...
</tbody>
</table>

6.5 合并单元格

合并单元格的方式

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fVVcHgiA-1654879047782)(E:\Typora\image-20220610231122728.png)]

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

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

合并单元格步骤：

先确定是跨行还是跨列合并。
找到目标单元格 , 写上合并方式=合并的单元格数量。比如：<td colspan="2"><td>。
删除多余的单元格。

<table align="center" border="1" cellspacing="0" width="300">
    <thead>
        <tr>
            <th colspan="3">学生成绩表</th>  <!--按列合并3列-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>姓名</td>
            <td>学科</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td rowspan="3">小明</td>  <!--按行合并3行-->
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <!-- 由于被合并所以第一列直接跳过 -->
            <td>数学</td>
            <td>96</td>
        </tr>
        <tr>
            <!-- 由于被合并所以第一列直接跳过 -->
            <td>英语</td>
            <td>100</td>
        </tr>
    </tbody>
</table>