HTML表格组成:
由<table>
标签以及一个或多个<tr>
、<th>
或<td>
标签:
-
<table>
标签:用来定义表格,整个表格包含在<table></table>
标签中; -
<tr>
标签:用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr></tr>
标签表示; -
<td>
标签和<th>
标签:用来定义单元格,所有单元格都在<th>
标签内,每个单元格由一对<td></td>
标签或一对<th></th>
标签表示,具体的表格内容放置在这一对<td>
标签或<th>
标签之中,其中th标签中的内容默认以粗体、居中的方式显示。
其语法如下:
<table>
<tr>
<th>1行1列的内容</th>
<th>1行2列的内容</th>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>
- 是的上层标签;
- 必须在一个
里面,它不能单独使用,相当于的属性标签;
- 标示一个表格,标示这个表格中间的一个行,中间;
、 标示行中的一个列,需要嵌套在
table标签属性:
1)border标签属性:设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框;
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border标签属性</title>
<style>
table{
border: 15px solid #000;
}
th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<table >
<tr>
<th> 姓名 </th>
<th> 年龄</th>
<th> 性别</th>
</tr>
<tr>
<td> 张三</td>
<td> 19 </td>
<td> 男 </td>
</tr>
</table>
</body>
</html>
2)width标签属性:设定表格的宽度;不建议通过width标签属性设置表格宽度,建议向table标签添加width样式属性进行设置。
- px :设置以像素计的宽度(例:width=“100px”)
- %:设置以包含元素的百分比计的宽度(例:width=“100%”)
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>width标签属性</title>
<style>
table{
width:"80%";
}
</style>
</head>
<body>