html中table标签、tr标签、th标签、td标签的基础知识

2021年8月29日 6点热度 0条评论 来源: XYFAITN

html中table标签、tr标签、th标签、td标签的基础知识

表格的结构

在基本表格结构中,表格标题项目表头数据资料构成了表格基本结构三个要素。
例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会动态改变,称作数据资料。
基本表格

源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通讯录</title>
</head>

<body>
	<table border="2">
		<caption align="center">通讯录</caption>
		<tr>
			<th>姓名</th>
			<th>QQ</th>
			<th>联系电话</th>
	    </tr>
		<tr>
			<td>张三</td>
			<td>123456789</td>
		    <td>123456789</td>
	    </tr>
	</table>
</body>
</html>

表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成:

  • table标签:定义一个表格
  • caption标签:定义表格标题,嵌套在<table></table>
  • tr标签:定义表格中的一行,嵌套在<table></table>
  • th标签:定义表格中的表头单元格,嵌套在<tr></tr>
  • td标签:定义表格中的数据单元格,嵌套在<tr></tr>

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示:

属性名 含义 常用属性值
border 设置表格的边框(默认border=“0”) 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素)
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素)
width 设置表格的宽度 像素值
height 设置表格的宽度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right
bgcolor 设置表格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置表格的背景图像 url地址

tr标签的基本属性

tr标签的基本属性如下图所示:

属性名 含义 常用属性值
height 设置行高度 像素值
align 设置一行内容的水平对齐方式 left、center、right
valign 设置一行内容的垂直对齐方式 top、middle、bottom
bgcolor 设置行背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置行背景图像 url地址

th和td标签的基本属性

th和td标签的基本属性如下图所示:

属性名 含义 常用属性值
width 设置单元格的宽度 像素值
height 设置单元格的高度 像素值
align 设置单元格内容的水平对齐方式 left、center、right
valign 设置单元格内容的垂直对齐方式 top、middle、bottom
bgcolor 设置单元格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background 设置单元格的背景图像 url地址

表格高级样式设置相关概念

外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定,frame取值与相应的样式如下:

  • above:显示上边框
  • below:显示下边框
  • hsides:显示上下边框
  • vsides:显示左右边框
  • lhs:显示左边框
  • rhs:显示右边框
  • border:显示上下左右边框
  • void:不显示边框

内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定,rules取值与相应的样式如下:

  • all:显示所有内部边框
  • none:不显示内部边框
  • rows:仅显示行边框
  • cols:仅显示列边框
  • groups:显示介于行组和列组间边框

单元格合并

在制作稍复杂的表格时,需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时,可在或标记中添加colspan属性,属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时,可在或标记中添加rowspan属性,属性的取值即为合并的单元格数目。

相关概念选择题及参考答案

选择题

1、定义表格的项目表头的HTML标签是( )。

A、
<table>

B、
<tr>

C、
<td>

D、
<th>

2、下列选项中,用于设置表格背景颜色的属性是( )。

A、
background

B、
bgcolor

C、
bordercolor

D、
backgroundcolor

3、要使表格的行高为18px,以下方法中,正确的是( )

A、
<table height="18px">...</table>

B、
<th height="18px">...</th>

C、
<tr height="18px">...</tr>

D、
<td height="18px">...</td>

4、下列选项中,用于设置表格标题的标签是( )

A、
<title>...</title>

B、
<h1>...</h1>

C、
<tags>...</tags>

D、
<caption>...</caption>

5、下列设置单元格中文本对齐方式的选项中,正确的是( )

A、
<th align="center" valign="center">...</th>

B、
<th align="center" valign="middle">...</th>

C、
<th align="middle" valign="center">...</th>

D、
<th align="middle" valign="middle">...</th>

6、下列选项中,用于设置表格内部边框线显示的属性是( )。

A、
border

B、
frame

C、
rules

D、
innerborder

7、如果希望表格的外部边框只显示上下两条边框线,属性frame的取值应选( )。

A、
hsides

B、
vsides

C、
lhs

D、
rhs

8、如果希望表格的内部边框只显示行线,则属性rules的取值应选( )。

A、
line

B、
rows

C、
cols

D、
groups

9、HTML中,若合并两个水平方向单元格,应使用的属性是( )。

A、
colspan

B、
nospan

C、
rowspan

D、
colwrap

10、<table rules=cols>,表示( )

A、
显示所有分隔线

B、
只显示组(Groups)与组之间的分隔线

C、
只显示行与行之间的分隔线

D、
只显示列与列之间的分隔线

参考答案

1、D
2、B
3、C
4、D
5、B
6、C
7、A
8、B
9、A
10、D

    原文作者:XYFAITN
    原文地址: https://blog.csdn.net/TNANDXYF/article/details/113183923
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。