HTML基础---表格标签

是小穆啊

已于 2023-04-18 09:41:16 修改

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html5 html 前端

于 2023-04-15 15:36:45 首次发布

本文链接：https://blog.csdn.net/weixin_48055520/article/details/130168052

HTML 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了HTML中的表格标签，包括table、tr、td、th等的使用，以及表格的各种属性，如border、cellspacing、cellpadding等。还讨论了如何设置表格的样式，如背景颜色、边框宽度，以及如何合并单元格。最后提到了表格结构标签thead和tbody的使用，以增强表格的语义性。

文章目录

一、表格的主要作用

   表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性强，特别是后台展示数据的时候，因此能够熟练运用表格就显得很重要。表格标签是HTML网页中的重要标签，利用表格可以对网页进行排版，使网页信息有条理地显示出来。

在这里插入图片描述

二、表格标签的基本语法

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

table标签用于定义一个表格的开始与结束，在table标签内部可以放置表格的标题、表格行和单元格等。
tr标签用于定义表格的一行，必须嵌套在table标签中
td标签用于定义表格单元格，必须嵌套在tr标签中

三、table标签的属性

属性	描述
border	设置表格的边框（默认border=“0”为无边框）
cellspacing	设置单元格与单元格之间的空间
cellpadding	设置单元格内容与单元格边缘之间的空间
width	设置表格的宽度
height	设置表格的高度
align	设置表格在网页中的水平对齐方式
bgcolor	设置表格的背景颜色
background	设置表格的背景图像

<body>
    <table>
        <tr>
            <td>序号</td>
            <td>基金公司</td>
            <td>相关链接</td>
            <td>成立时间</td>
            <td>天相评级</td>
        </tr>
        <tr>
            <td>1</td>
            <td>东兴证券股份有限公司</td>
            <td>详情</td>
            <td>2008-05-28</td>
            <td>暂无评级</td>
        </tr>
        <tr>
            <td>2</td>
            <td>安信证券股份有限公司</td>
            <td>详情</td>
            <td>2006-08-22</td>
            <td>暂无评级</td>
        </tr>
        <tr>
            <td>3</td>
            <td>国信证券股份有限公司</td>
            <td>详情</td>
            <td>2007-09-07</td>
            <td>暂无评级</td>
        </tr>
        <tr>
            <td>4</td>
            <td>天风证券股份有限公司</td>
            <td>详情</td>
            <td>2000-03-29</td>
            <td>暂无评级</td>
        </tr>
    </table>
</body>

如下图所示，创建的是未设置任何属性的表格

在这里插入图片描述

1、设置border属性的表格样式（设置表格的边框）

<table border="1">

在这里插入图片描述

2、设置cellspacing属性的表格样式（设置单元格与单元格之间的空间）

<table border="1" cellspacing="0">

在这里插入图片描述

3、设置cellpadding属性的表格样式（设置单元格内容与单元格边缘之间的空间）

<table border="1" cellspacing="0" cellpadding="20">

在这里插入图片描述

4、设置width和height属性的表格样式（设置表格的宽度与高度）

<table border="1" cellspacing="0" cellpadding="20" width="800px" height="200px">

在这里插入图片描述

5、设置align属性的表格样式（设置表格水平对齐方式）

<table border="1" cellspacing="0" cellpadding="20" width="800px" height="200px" align="center">

在这里插入图片描述

6、设置bgcolor属性的表格样式（设置表格的背景颜色）

<table border="1" cellspacing="0" cellpadding="20" width="800px" height="200px" align="center" bgcolor="#fffff">

在这里插入图片描述

7、设置background属性的表格样式（设置表格的背景图像）

 <table border="1" cellspacing="0" cellpadding="20" width="800px" height="200px" background="蜡笔小新.png">

在这里插入图片描述

四、tr标签的属性和td标签的属性

1、tr标签的属性

属性	描述
height	设置行高度
align	设置一行内容的水平对齐方式
valign	设置一行内容的垂直对齐方式
bgcolor	设置行背景颜色
background	设置行背景图像

2、td标签的属性

属性	描述
width	设置单元格的宽度
height	设置单元格的高度
align	设置单元格内容的水平对齐方式
valign	设置单元格内容的垂直对齐方式
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图像
colspan	设置单元格横跨的列数（用于合并水平方向的单元格）
rowspan	设置单元格竖跨的行数（用于合并竖直方向的单元格）

tr标签的属性、td标签的属性和table标签的属性设置方式类似，所以就不再重复设置。

五、th标签

应用表格时经常需要对表格设置表头，以使表格的格式更加清晰，方便查阅。表头一般位于表格的第一行，其文本加粗居中。

1、未使用th标签设置表头时的样式

<table border="1" cellspacing="0" cellpadding="8px">
        <tr>
            <td>序号</td>
            <td>基金公司</td>
            <td>相关链接</td>
            <td>成立时间</td>
            <td>天相评级</td>
        </tr>
    </table>

在这里插入图片描述
2、使用th标签设置表头时的样式

<table border="1" cellspacing="0" cellpadding="8px">
        <tr>
            <th>序号</th>
            <th>基金公司</th>
            <th>相关链接</th>
            <th>成立时间</th>
            <th>天相评级</th>
        </tr>
    </table>

在这里插入图片描述
特别注意！！！

th标签和td标签都是嵌套在tr标签里面，切记不要搞错位置关系

六、合并单元格（应用td标签的colspan属性和rowspan属性）

1、先确定是跨行合并还是跨列合并（以跨行合并为例）

跨行用到的是td标签的rowspan属性

2、找到目标单元格，写上“合并方式=合并单元格数量”

例：以第二行的第一个单元格为目标单元格，合并第二行和第三行的第一个单元格

在这里插入图片描述

<table border="1" cellspacing="0" cellpadding="50px">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

在这里插入图片描述
3、合并完成，删除多余的单元格”

在这里插入图片描述

这就完成了跨行合并单元格

七、表格结构标签

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

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

八、综合练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html">
    <meta charset="utf-8">
    <title>表格标签</title>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="20px">
        <thead>
            <tr bgcolor="yellow">
                <th>序号</th>
                <th>基金代码</th>
                <th>简称</th>
                <th>相关链接</th>
                <th>申购状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">1</td>
                <td>014736</td>
                <td>创金合信专精特新股票发起A</td>
                <td><a href="#">基金吧</a></td>
                <td>开放申购</td>
            </tr>
            <tr>
                <td align="center">2</td>
                <td>014737</td>
                <td>创金合信专精特新股票发起C</td>
                <td><a href="#">基金吧</a></td>
                <td>开放申购</td>
            </tr>
            <tr>
                <td align="center">3</td>
                <td>011378</td>
                <td>创金合信积极成长股票C</td>
                <td><a href="#">基金吧</a></td>
                <td>开放申购</td>
            </tr>
            <tr>
                <td align="center">4</td>
                <td>011377</td>
                <td>创金合信积极成长股票A</td>
                <td><a href="#">基金吧</a></td>
                <td>开放申购</td>
            </tr>
            <tr>
                <td align="center">5</td>
                <td>005628</td>
                <td>汇安趋势动力股票A</td>
                <td><a href="#">基金吧</a></td>
                <td>开放申购</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述
以上就是表格标签的全部内容，谢谢观看！