1.表格标签
表格标签的嵌套关系
<table>
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是th-->
<th></th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<!--表格列，【注意】这里使用的是td-->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>2.实例演示–课程表
border-collapse:collapse; - - -表示清除表格之间的间隙
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1.清除表格默认样式*/
table{
border-collapse: collapse;
}
th,td{
padding: 0;
}
/*2.设置表格大小，以及表框颜色*/
table{
margin: 0 auto;
width: 500px;
}
th,td{
border: 1px solid pink;
font: 20px/50px "微软雅黑";
text-align: center;
}
</style>
</head>
<body>
<!--
表格标签
table 表格
thead 表格头
tbody 表格主体
tr 表格行
th 表格头里的单元格(默认加粗并且居中)
td 表格主体里的单元格
tfoot 表格底部
表格的默认样式
table{border-collapse:collapse;} 单元格之间的间隙
th,td{padding:0}
-->
<table cellspacing="0">
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<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>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<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>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
</table>
</body>
</html>
3.表格行和列的合并
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 0;
}
table{
margin: 0 auto;
width: 500px;
}
th,td{
border: 1px solid pink;
font: 20px/50px "微软雅黑";
text-align: center;
}
</style>
</head>
<body>
<!--
表格标签
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
-->
<table cellspacing="0">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4"> 上午</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>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文 </td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</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>
</tbody>
</table>
</body>
</html>
配套小练习
链接地址：http://blog.csdn.net/baidu_37107022/article/details/71713520