表格的基本标签
HTML表格由table标签以及一个或多个tr、th或td标签组成:
- table标签:定义一个表格
- caption标签:定义表格标题,嵌套在
<table></table>
中 - tr标签:定义表格中的一行,嵌套在
<table></table>
中 - th标签:定义表格中的表头单元格,嵌套在
<tr></tr>
中 - td标签:定义表格中的数据单元格,嵌套在
<tr></tr>
中
表格标签的基本属性
table标签的基本属性
table标签的基本属性如下图所示:
tr标签的基本属性
tr标签的基本属性如下图所示:
th和td标签的基本属性
th和td标签的基本属性如下图所示:
示例如下:
<!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>
实现的效果如下图所示:
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属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。