html 表 colspan 行跨度 Piet Mondrian
Posted
技术标签:
【中文标题】html 表 colspan 行跨度 Piet Mondrian【英文标题】：html table colspan rowspan Piet Mondrian 【发布时间】：2020-11-15 12:19:43 【问题描述】：我正在尝试构建 Piet Mondrian's famous photo 的类似 html 表的版本：
我已经成功（我认为）rowspan 和 colspan 的东西，但宽度和高度似乎与原始照片不太一样。
这是我所做的：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
td
border:solid 1px black;
width:20px;
height:20px;
</style>
</head>
<body>
<table>
<tr id="tr0">
<td colspan="2" rowspan="3"></td>
<td colspan="6"rowspan="6"></td>
</tr>
<tr id="tr1">
</tr>
<tr id="tr2">
</tr>
<tr id="tr3">
<td colspan="2" rowspan="3"></td>
</tr>
<tr id="tr4">
</tr>
<tr id="tr5">
</tr>
<tr id="tr6">
<td colspan="2" rowspan="2"></td>
<td colspan="5" rowspan="2"></td>
<td></td>
</tr>
<tr id="tr7">
<td></td>
</tr>
</table>
</body>
</html>感谢您的帮助。
【问题讨论】：
不要使用表格进行布局。使用它们来呈现数据.. 我知道，但这对我来说只是一个游戏，我希望它能奏效...... 【参考方案1】：我想问题在于它的大小适合其内容，所以我在每行中添加了一个隐藏列和一个包含 8 列的隐藏行，这样表格就可以根据我需要的列数来适应它的大小。现在我遇到了一个不同的问题，那里有一条线，我不知道为什么......
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
td
border:solid 3px black;
width:20px;
height:20px;
.nob
border:0px;
table
border-collapse:collapse;
</style>
</head>
<body>
<table>
<tr>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
<td class="nob"></td>
</tr>
<tr id="tr0">
<td colspan="2" rowspan="3"></td>
<td colspan="6"rowspan="6" style="background-color:red;"></td>
<td class="nob"></td>
</tr>
<tr id="tr1">
<td class="nob"></td>
</tr>
<tr id="tr2">
<td class="nob"></td>
</tr>
<tr id="tr3">
<td colspan="2" rowspan="3"></td>
<td class="nob"></td>
</tr>
<tr id="tr4">
<td class="nob"></td>
</tr>
<tr id="tr5">
<td class="nob"></td>
</tr>
<tr id="tr6">
<td colspan="2" rowspan="2" style="background-color:blue;"></td>
<td colspan="5" rowspan="2"></td>
<td></td>
<td class="nob"></td>
</tr>
<tr id="tr7">
<td style="background-color:yellow;"></td>
<td class="nob"></td>
</tr>
</table>
</body>
</html>【讨论】：
以上是关于html 表 colspan 行跨度 Piet Mondrian的主要内容，如果未能解决你的问题，请参考以下文章
考虑到行跨度和列跨度，如何从一维数组创建动态 html 表？