1、表格常用标签以及释义
<table></table>- 定义表格的标签
<caption></caption>- 表格的标题
<thead></thead>- <thead> 标签用于组合 HTML 表格的表头内容。
- <thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。
- <thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。
<tbody></tbody>- <tbody> 标签用于组合 HTML 表格的主体内容。
<tfoot>- <tfoot> 标签用于组合 HTML 表格的页脚内容。
<th></th>- 表头单元格，具有居中、加粗的效果
<tr></tr>- 定义行
<td></td>- 标准单元格
注：
- <thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。
2、行和列的合并
①、水平方向
属性名：colspan，默认会往右侧合并
注意：当前单元格同行右侧的<td>，需要删除否则会被挤出去。
例如：colspan=3，则需要删除右侧的3个<td>，
②、垂直方向
属性名：rowspan，默认会往下方进行合并
注意：当前单元格下行的<td>需要删除
例如：rowspan=3，当前行下方的3个<tr>中都需要删除一个<td>
3、常用属性
- border
- 边框
- cellspacing=”0”
- 表格的边框间距为0
- cellpadding=”5”
- 表格的padding间距
- width
- align
4、表格使用课程表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课程表</title><style>th{background-color: lightgrey;}td{text-align: center;}.time{background-color: lightblue;}tfoot:nth-of-type(1){background-color: lightgrey;}</style></head><body><table border="1px" cellspacing="0px" cellpadding="0px" width="400px"><caption style="margin-bottom: 5px;"><strong>课程表</strong></caption><thead><tr><th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><tr><td rowspan="4" class="time">上午</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></tbody><tr><td colspan="6">中午休息</td></tr><tbody><tr><td rowspan="3" class="time">下午</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></tbody><tfoot><tr><td>备注</td><td colspan="5">每天下午15:30-17:30在校写完作业才能回家</td></tr></tfoot></table></body></html>
