失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > HTML中表格标签<table><tr><tb><th>中单元格的合并问题

HTML中表格标签<table><tr><tb><th>中单元格的合并问题

时间:2022-01-16 08:59:01

相关推荐

HTML中表格标签<table><tr><tb><th>中单元格的合并问题

前情知晓

层级关系如下:

<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>

如果觉得《HTML中表格标签<table><tr><tb><th>中单元格的合并问题》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。