为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK!
【表格构成】
<table></table> 表格
<thead></thead> 表格的头部
<tbody></tbody> 表格的身体
<tfoot></tfoot> 表格的尾部
<tr></tr> 表格的行
<th></th> 表格的标题
<td></td> 表格的单元格
【表格的四层嵌套】
table
......thead
............tr
..................th
......tbody
............tr
..................td
......tfoot
【表格的特性】
1.table标签特性:
(1).单元格平分整个table的宽度
(2).th内容默认加粗,且水平垂直居中
(3).td内容不加粗,只垂直居中
(4).table的宽度决定整个表格宽度,如果td,th设置总宽度比总宽度大,不起作用
(5).表格的同一列继承最大的宽度(解决方法:th,td最好都设置宽度)
(6).表格的同一行继承最大的宽度(解决方法:th,td最好都设置高度)
2.单元格的合并
(1).colspan="数值" 行合并
(2).rowspan="数值" 列合并
数值代表要合并的单元格数量,被合并的单元格需要注释掉
【样例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格基础</title>
<style>
table{
border: 1px solid red;
/*合并边框*/
border-collapse:collapse;
}
th,td{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">周一二</th>
<!-- <th>周二</th> -->
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td rowspan="2">体育</td>
<td>政治</td>
</tr>
<tr>
<td>美术</td>
<td>化学</td>
<td>英语</td>
<!-- <td>数学</td> -->
<td>政治</td>
</tr>
</tbody>
</table>
</body>
</html>