HTML表结构
从语义上划分表格为:表头、表主体、表尾
table 标签标识表格标签
tr 标签标识行标签
td 标签标识单元格标签
th 标签标识表格头部标签
border 标识表格边框属性
width 属性设置表格宽度
bgcolor 属性设置表格背景颜色
background 属性设置表格的背景图片
caption 表格的标题
thead 标签标识表格头部元素
tbody 标签标识表格表体元素
tfoot 标签标识表格表尾部分
cellpadding 表格中内容和单元格之间的距离
cellspacing 表格中单元格和单元格之间的距离
在默认情况下,如果不设置表格的边界,表格不显示边界的,可以用border属性设置表格边框
代码展示:
<body>
<table border="1">
<!--表格标题-->
<caption><h2>学生成绩表</h2></caption>
<!--tr 行-->
<tr>
<!--标题列-->
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1001</td>
<td>尼古拉斯赵四</td>
<td>20</td>
</tr>
<tr>
<td>1002</td>
<td>刘能</td>
<td>30</td>
</tr>
<tr>
<td>1003</td>
<td>谢广坤</td>
<td>20</td>
</tr>
</table>
</body>
效果:
关于跨行和跨列
主要就是说一下关于合并行和列的方法
rowspan 合并行
colspan 合并列
thead 标签标识表格头部元素
tbody 标签标识表格表体元素
tfoot 标签标识表格表尾部分
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
width: 600px;/*表格宽度*/
margin: 0 auto;/*设置表格左右居中*/
}
table,th,td{
border-collapse: collapse;/*把所有的table,th,td标签的边框进行合并*/
text-align: center;/*文本水平居中*/
}
</style>
</head>
<body>
<table border="1">
<caption>学生课程表</caption>
<thead style="background-color: antiquewhite;">
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody style="background-color: #0000FF;">
<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 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>
</tbody>
<tfoot style="background-color: cadetblue;">
<tr>
<td>晚上</td>
<td colspan="5">自习</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果图
表格嵌套
在表格里还可以继续嵌套表格,这里直接看代码吧
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<td><img src="../img/hetao.jpg"></td>
<td>
<ul>
<li>张三丰</li>
</ul>
</td>
<td>
<table>
<tr>
<td>呵呵</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>