一、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
这是一个两行两列的表格
table标签包含:thead、tbody、tfoot、tr(行)、td(列)
二、常用属性
<table border="1" width="300px" height="200px" bgcolor="pink" align="center" cellpadding="20" cellspacing="10">
border:设置表格的边框(默认值为0)
width和height:宽度和高度
bgcolor:背景颜色
background:背景图片
align:表格的位置
cellpadding:表格的边距(表格内元素与边框的距离)
cellspacing:表格的间距(单元格之间的距离)
三、表格的合并
rowspan:合并行
clospan:合并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" height="600px" width="600px" align="center" bgcolor="pink">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
这是一个三行三列的表格,现在将表格编号为1和4的两个表格合并:
因为是合并的是行,所以使用rospan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" height="600px" width="600px" align="center" bgcolor="pink">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
结果如下:
需要注意的是,在合并的同时要将第二行第一列删除,可以理解
<td rowspan="2"></td>
表示原来编号为1和4的这两个表格,所以第二行的第一列就需要删除,否则就会重复,出现错误。
若未删除否则会出现如下错误:
若要合并编号为1和2和3的表格,得到如下表格:需要进行什么操作呢?
毋庸置疑,是合并列,所以使用clospan。并将其余两个<hd>删除,就可以满足要求。(这里不好理解,可以简单理解为:第一行从三个表格变为一个表格,所以在第一个<tr>中只需要一个<td>就行了。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" height="600px" width="600px" align="center" bgcolor="pink">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>