表格的基本结构_表格的组成部分

作者：煮酒与君饮 | 2024-07-27 04:26:05

踩

表格的组成部分

创建简单的表格

表格的结构及对应的标签
一个基本的表格是由行和每行中的单元格组成的，一般要包含表格标题、项目标题和数据资料三个要素。例如下图所示的表格
通讯录
对应的代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="5px">
       <caption>通讯录</caption>
        <tr>
            <th>姓名</th>
            <th>QQ</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>123456</td>
            <td>13511112222</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>654321</td>
            <td>13611112222</td>
        </tr>
    </table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

表格标签的属性
显然上面的表格很不美观，我们可以尝试为表格添加背景色，并调整表格的宽度和单元格的宽度。
示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="5px" bgcolor="00ffff" width="300">
       <caption>通讯录</caption>
        <tr>
            <td width=100>姓名</td>
            <td width=100>QQ</td>
            <td width=100>电话</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>123456</td>
            <td>13511112222</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>654321</td>
            <td>13611112222</td>
        </tr>
    </table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

实现的效果如下图所示：
通讯录

表格行样式的设置

tr标签
tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式：

height
tr标签中的height属性设置行高，属性取值为具体行高的数值。

align
tr标签中的align属性设置行内单元格中文本的水平对齐方式，属性取值可以为left、center、right。

valign
tr标签中的valign属性设置行内单元格中文本的垂直对齐方式，属性取值可以为top、middle、bottom。

bgcolor
tr标签中的bgcolor属性设置行内单元格的背景颜色，属性取值可以为颜色单词或颜色代码。

background
tr标签中的background属性设置行背景图像，属性取值为背景图像的路径。

表格中单元格样式的设置

表格中的单元格样式
表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。

单元格整体样式
单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

cellspacing
cellspacing属性用于设置单元格之间的间隙，取值为某一数值。

cellpadding
cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙，也称为内边距，取值为某一数值。

某个单元格的样式
可在对应的th或td标签中设置单元格的属性。

width
th或td标签中的width属性设置单元格的宽度，属性取值为具体宽度值。

height
th或td标签中的height属性设置单元格的高，属性取值为具体行高度值。

align
th或td标签中的align属性设置单元格中文本的水平对齐方式，属性取值可以为left、center、right。

valign
th或td标签中的valign属性设置单元格中文本的垂直对齐方式，属性取值可以为top、middle、bottom。

bgcolor
th或td标签中的bgcolor属性设置单元格的背景颜色，属性取值可以为颜色单词或颜色代码。

background
th或td标签中的background属性设置单元格的背景图像，属性取值为背景图像的路径。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/888647