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

最新推荐文章于 2024-08-09 16:14:30 发布

Study_Java_x

最新推荐文章于 2024-08-09 16:14:30 发布

阅读量3.8w

点赞数 58

分类专栏： html table 文章标签： html html5

本文链接：https://blog.csdn.net/TNANDXYF/article/details/113183923

版权

html 同时被 2 个专栏收录

2 篇文章 5 订阅

订阅专栏

table

1 篇文章 0 订阅

订阅专栏

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地址