HTML表格挑战
我非常感谢你帮我弄明白这一点。我正在制作一个HTML表格拼图，试图匹配以下图片： 我所有的东西都很好，使用rowspan标签在两边制作红色的柱子，第一、第二、第四和第五行都很好，但是第三行，有三个紫色的矩形，我无法在不打破桌子的情况下将它们居中并调整到较小的尺寸HTML表格挑战,html,html-table,Html,Html Table,我非常感谢你帮我弄明白这一点。我正在制作一个HTML表格拼图，试图匹配以下图片： 我所有的东西都很好，使用rowspan标签在两边制作红色的柱子，第一、第二、第四和第五行都很好，但是第三行，有三个紫色的矩形，我无法在不打破桌子的情况下将它们居中并调整到较小的尺寸 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body { background-color:black;}
table { background-color:white;
margin: 0px auto;
width:1000px;
height:500px;}
td { width:200px;
height:100px;
}
</style>
</head>
<body>
<table border="2px solid white">
<tr>
<td bgcolor="red" rowspan="5" align="left"></td>
<td bgcolor="white"></td>
<td bgcolor="green" colspan="2" align="center" colspan="2"></td>
<td bgcolor="white"></td>
<td bgcolor="red" rowspan="5" align="right"></td>
</tr>
<tr>
<td bgcolor="blue" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
<td bgcolor="purple"></td>
</tr>
<tr>
<td bgcolor="green" colspan="4"></td>
</tr>
<tr>
<td bgcolor="purple" colspan="4"></td>
</tr>
</table>
</body>
</html>
无标题文件
正文{背景色：黑色；}
表{背景色：白色；
保证金：0px自动；
宽度：1000px；
高度：500px；}
td{宽度：200px；
高度：100px；
}
rowspancolspan…例如考虑一个简单的4行X 3 COLS表：
td{宽度：30px；高度：30px；文本对齐：中心；}
1.
2.
3.
4.
5.
6.
7.
8.
9
A.
B
C
正文{
背景色：黑色；
}
桌子{
背景色：白色；
保证金：0px自动；
宽度：1000px；
高度：500px；
边框：2倍纯白；
}
运输署{
宽度：200px；
高度：100px；
}
.red{背景色：red}
.white{背景色：白色}
.green{背景色：绿色}
.blue{背景色：blue}
.purple{背景色：purple}一个备选方案是flexbox。我并不是说它比桌子好，但可以这样做： 见： 虽然我非常喜欢flexbox，但对于这个问题，一个表至少也能起到同样的作用（尽管如果您想改变flexbox的正确方式，它可能会成为一个更好的解决方案） 风格：
#父级{
边际：0px；
填充：0px；
左：20vw；
右：20vw；
背景色：红色；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：立柱；
-webkit对齐项目：拉伸；
对齐项目：拉伸；
高度：100vh；
}
.行，.行sm{
填充：2px；
垫底：0px；
弹性：1；
背景色：白色；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
-webkit对齐项目：拉伸；
对齐项目：拉伸；
}
.排：最后一个孩子{
垫底：2件；
}
.行>分区{
弹性：1；
}
#居中{
-webkit内容：中心；
证明内容：中心；
}
#居中>div{
flex：首字母；
宽度：40%；
背景色：#655900；
}
#sm3{
弹性：5；
/*这将不需要间距div；但是，起点和终点间隙将是其应有大小的一半
-webkit内容：周围的空间；
证明内容：周围的空间；
*/
}
#sm3>div{
宽度：16.6666%；
背景色：白色；
}
#sm3>分区：第n个子项（偶数）{
背景色：#111155；
}
蓝先生{
背景颜色：蓝色；
}
格林先生{
背景颜色：绿色；
}
紫色{
背景颜色：紫色；
}
…colspanrowspan