1、基本结构
1、一个完整的表格由:表格标题、表格头部、表格主体、表格脚注、四部分组成
2、 表格涉及到的标签:
- table:表格
- caption:表格标题
- thead:表格头部
- tbody:表格主体
- tfoot:表格角注
- tr:每一行
- th、td:每一个单元格(备注:表格头部中用th,表格主体、表格角注中用td)
3、具体编码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="学生信息" border="1">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>名族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
2、常用属性
标签名 | 标签语义 | 常用属性 | 单/双标签 |
table | 表格 | width:设置表格宽度 height:设置表格高度 border:设置表格边框宽度 cellspacing:设置单元格之间的间距 | 双 |
thead | 表格头部 | height:设置表格高度 align:设置单元格水平对齐方式,可选值如下: 1、 left 左对齐 right 右对齐 center:居中 valign:设置垂直对齐方式,可选值如下:1、top 顶部对齐 bottom 底部对齐 middle 居中对齐 | 双 |
tbody | 表格主体 | 通用属性与thead相同 | 双 |
tfoot | 表格脚注 | 通用属性与thead相同 | 双 |
tr | 行 | 通用属性与thead相同 | 双 |
td | 普通单元格 | width:设置单元格的宽度,同列所有单元格全都会受影响 height:设置单元格的高度,同行所有单元格全都受影响 align:设置单元格水平对齐方式 valign:设置单元格垂直对齐方式 rowspan:指定要跨的行数 colspan:指定要跨的列数 | 双 |
th | 表头单元格 | 常用属性与td相同 | 双 |
注意点:
- <table>元素的border属性可以控制表格边框,但border值的大小,并不控制单元格边框的宽度,只能控制表格最外侧边框的宽度,这个问题如何解决?--后期靠css控制。
- 给某个th或td设置了宽度之后,他们所在的那一列的宽度就确定了。
3、跨行跨列
- rowspan:指定要跨的行数
- colspan:指定要跨的列数
课程表效果:
编写思路: