您的位置：首页 > Web前端 > CSS

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

2017-05-12 11:23 204 查看

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:
13f4d
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航