表格Table
用来处理和显示数据。
学习要求:能手写表格结构,能合并单元格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<table width="500" border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>电话</td>
</tr>
<tr>
<td>小王</td>
<td>男</td>
<td>1391591236</td>
</tr>
<tr>
<td>小金</td>
<td>女</td>
<td>15863251122</td>
</tr>
</table>
</body>
</html>
<table>里面只能装<tr>(代表行),<tr>里面只能装<td>(代表单元格)。
table的常用属性:
- border:表格的边框(默认为border=“0”无边框);
- cellspacing:单元格与单元格边框之间的空白间距(默认2像素);
- cellpadding:单元格内容与单元格边框之间的空白间距(默认1像素);
- width:表格的宽度(像素值);
- height:表格的高度(像素值);
- align:表格在网页中的水平对齐方式(left、center、right);
注意→正常三参为0:border、cellspacing、cellpadding设置为0
表头标签
<th> </th> 即表头单元格,一般用于第一行或者第一列,其文本加粗居中。
<table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>男</td>
<td>1391591236</td>
</tr>
<tr>
<td>小金</td>
<td>女</td>
<td>15863251122</td>
</tr>
</table>
表格标题
<table>
<caption>个人信息表</caption>
</table>
caption标签必须紧随table标签之后(只存在表格里面),只能对每个表格定义一个标题。
表格结构
- 头部:<thead> </thead>
- 主题:<tbody> </tbody>
合并单元格
- 跨行合并:rowspan 合并为列
- 跨列合并:colspan 合并为行
合并顺序:自上而下,先左后右。
删除的个数 = 合并的个数 - 1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="400" height="100" border="1">
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>AA</td>
<td colspan="2">BB</td>
<!-- <td>CC</td> -->
</tr>
</table>
</body>
</html>