HTML 表挑战
[英]HTML tables challenge
问题描述
I would greatly appreciate help figuring this out.
我将非常感谢帮助解决这个问题。 I'm working on a HTML table puzzle trying to match this image here:我正在研究 HTML 表格拼图，试图在此处匹配此图像：
I have everything good, make the red pillars on both sides using the rowspan tag, have the 1st, 2nd, 4th, and 5th row good, but the third row, with the three purple rectangles I just can't get to center themselves and resize to the smaller size without breaking the table.我的一切都很好，使用 rowspan 标签制作两边的红色柱子，第一、第二、第四和第五行很好，但是第三行，三个紫色矩形我无法居中在不破坏表格的情况下调整到较小的尺寸。
<!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>
5 个解决方案
解决方案1
1 已采纳 2015-11-07 20:08:26
You need more columns: 您需要更多列：
body { background-color: black; } table { background-color: white; margin: 0px auto; width: 1000px; height: 500px; border: 2px solid white; } td { width: 200px; height: 100px; } .red { background-color: red } .white { background-color: white } .green { background-color: green } .blue { background-color: blue } .purple { background-color: purple }
<table> <tr> <td class="red" rowspan="5"></td> <td class="white" colspan="2" ></td> <td class="green" colspan="3" ></td> <td class="white" colspan="2" ></td> <td class="red" rowspan="5"></td> </tr> <tr> <td class="blue" colspan="7" ></td> </tr> <tr> <td class="white" ></td> <td class="purple" ></td> <td class="white" ></td> <td class="purple" ></td> <td class="white" ></td> <td class="purple" ></td> <td class="white" ></td> </tr> <tr> <td class="green" colspan="7" ></td> </tr> <tr> <td class="purple" colspan="7" ></td> </tr> </table>
解决方案2
0 2015-11-07 19:57:55
Is this some kind of homework exercise? 这是某种家庭作业吗？ Anyways, instead of centering your table cells, try to add white table cells. 无论如何，不要将表格单元格居中，而是尝试添加白色表格单元格。 You need more columns. 您需要更多列。 And you have to recalculate your colspan attributes. 而且，您必须重新计算colspan属性。 Good luck! 祝好运！
解决方案3
0 2015-11-07 20:02:50
It really doesn't seem too complex. 它看起来似乎并不复杂。
Just draw the wanted result on squared paper and you should be able to immediately detect the correct rowspan / colspan values to use. 只需在方格纸上绘制所需的结果，您就应该能够立即检测出要使用的正确的rowspan / colspan值。
Just note that when writing down the HTML you need to completely skip the <td>...</td> for cells that end up in the "extension" of cells considered before in the sequence. 只需注意，写下HTML时，您需要完全跳过<td>...</td> ，以结束在序列中之前考虑的单元格“扩展”中的单元格。
For example consider a simple 4 rows x 3 cols table: 例如，考虑一个简单的4行x 3 cols表：
<!DOCTYPE html> <html> <head> <style type="text/css"> td { width:30px; height: 30px; text-align:center; } </style> </head> <body> <table border=1> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> </body> </html>
If you want to merge 1 and 2 you need to declare colspan=2 on the cell 1 and then omit cell 2. Similarily if you want to merge 5/6/8/9 you need to declare colspan=2 rowspan=2 on cell 5 and omit the merged ones: 如果要合并1和2，则需要在单元格1上声明colspan=2 ，然后省略单元格2。类似地，如果要合并5/6/8/9，则需要在单元rowspan=2上声明colspan=2 rowspan=2 5并省略合并的：
<!DOCTYPE html> <html> <head> <style type="text/css"> td { width:30px; height: 30px; text-align: center; } </style> </head> <body> <table border=1> <tr> <td colspan=2>12</td> <td>3</td> </tr> <tr> <td>4</td> <td colspan=2 rowspan=2>56<br/>89</td> </tr> <tr> <td>7</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table> </body> </html>
解决方案4
0 2015-11-07 20:56:07
One alternative could be flexbox . 一种替代方法是flexbox 。 I'm not saying it's better than a table, but this could be done as follows: 我并不是说它比表格更好，但是可以按照以下步骤进行：
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 请参阅： https ： //css-tricks.com/snippets/css/a-guide-to-flexbox/
While I am very fond of flexbox, a table works at least as well for this issue (though if what you wanted were to change the right ways flexbox may become a better solution). 尽管我非常喜欢flexbox，但至少有一个表可以很好地解决该问题（尽管如果您想要更改flexbox的正确方法，它可能会成为更好的解决方案）。
style: 样式：
#parent { margin: 0px; padding: 0px; padding-left: 20vw; padding-right: 20vw; background-color: red; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; height: 100vh; } .row, .row-sm { padding: 2px; padding-bottom: 0px; flex: 1; background-color: white; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } .row:last-child { padding-bottom: 2px; } .row > div { flex: 1; } #centered { -webkit-justify-content: center; justify-content: center; } #centered > div { flex: initial; width: 40%; background-color: #655900; } #sm3 { flex: .5; /* This would not require the spacing divs; however, the start and end gap would be half the size it should be -webkit-justify-content: space-around; justify-content: space-around; */ } #sm3 > div { width: 16.6666%; background-color: white; } #sm3 > div:nth-child(even) { background-color: #111155; } .blue { background-color: blue; } .green { background-color: green; } .purple { background-color: purple; }
<div id="parent"> <div class="row" id="centered"> <div></div> </div> <div class="row"> <div class="blue"></div> </div> <div class="row" id="sm3"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="row"> <div class="green"></div> </div> <div class="row"> <div class="purple"></div> </div> </div>
NOTE: While this version scales, it could also be adjusted to have fixed content sizes; 注意：虽然此版本可以缩放，但也可以将其调整为具有固定的内容大小。 however, fixed content sizes could be done easily without flex anyway (just divs width widths/heights padding, ect). 但是，固定的内容大小可以轻松实现而无需任何弯曲（只需divs宽度width / heights padding等）。
解决方案5
0 2022-08-03 12:20:08
<!DOCTYPE html>
<html>
<head>
<style>
td{
width: 75px;
height: 100px;
}
.r{
background-color: red;
}
.w{
background-color: white;
}
.g{
background-color: green;
}
.b{
background-color: blue;
}
.p{
background-color: purple;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="g" rowspan="2" colspan="3"></td class="g">
<td class="w" rowspan="2" colspan="2"></td class="w">
<td class="r" rowspan="9" colspan="2" style="width:150px;"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="b" rowspan="2" colspan="7"></td class="b">
</tr>
<tr>
</tr>
<tr>
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
<td class="p" style="height: 50px;"></td class="r">
<td class="w" style="height: 50px;"></td class="r">
</tr>
<tr>
<td class="g" rowspan="2" colspan="7"></td class="r">
</tr>
<tr>
</tr>
<tr>
<td class="p" rowspan="2" colspan="7"></td class="r">
</tr>
</table>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.