正文

一天搞定CSS：表格（table）--19

IP云
IP云V管理员/8 阅读
07/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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