表格的结构

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

源代码

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