前情知晓
层级关系如下:
<table><tr><td> </td><th> </th></tr></table>
<table>...</table> 用于定义一个表格开始和结束
<tr>...</tr> 定义一行标签,一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<th>...</th> 定义表头单元格,表格中的文字将以粗体显示,在表格中也可以不用此标签
<td>...</td> 定义单元格标签,一组<td>标签将将建立一个单元格
好啦,听我来说两句吧!上面引用块是官方解释,看了之后你也不会用
tr标签向下定义一行,里面包裹的td或th再向后定义每一列=> 两者结合定义出一个单元格
合并单元格问题
牢记:tr标签定义一行,里面包裹的td或th定义每一列=> 两者结合定义出一个单元格
以实现上图效果为例:
rowspan = “2”: 向下合并 2 行
colspan = “3”:向右合并 3 列
如你所见,最左上角的那个空单元格其实是左右两个单元格合并后的结果
再看那个“上午”的单元格其实是向下合并5个单元格的结果
利用tr向下定义一行后,再用td向右定义一列,形成一个单元格
<!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>Document</title><link rel="stylesheet" href="./mystyle.css"></head><body><table border="1" cellspacing="0"><tr><th colspan="2"></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><th rowspan="5">上午</th><td>1</td><td>课程名称<br>教室名称</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td><td>这里有内容</td></tr><tr><td>5</td></tr><tr><td rowspan="4">下午</td><td>6</td></tr><tr><td>7</td></tr><tr><td>8</td></tr><tr><td>9</td></tr></table></body></html>