首页 > 代码库 > 【CSS学习笔记】整齐的表格
【CSS学习笔记】整齐的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第37课 整齐的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style type="text/css">
table{
border-collapse: collapse;
/*边框融合，边框之间不存在空隙*/
/*border-collapse: separate;
边框之间相互独立*/
/*border-spacing: 20px;
边框之间相距20像素，比较宽，不美观，一般是在separate的状态下使用*/
}
td{
border:5px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4">1(4列合并成1列)</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td rowspan="2">24（2行合并1行）</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>
作业：制作课程表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第37课 制作课程表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style type="text/css">
table{
border-collapse: collapse;
}
td{
width: 100px;
height: 25px;
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>时间日期</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">上午时间</td>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td></td>
<td></td>
</tr>
<tr>
<td>语文</td>
<td>地理</td>
<td>代数</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="2">下午时间</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
【CSS学习笔记】整齐的表格