Question

我非常感谢帮助搞清楚这一点。我正在研究一个HTML表拼图，试图在这里匹配这个图像：

我有一切都很好，使用rowspan标签制作两侧的红色支柱，让第1，第2，第4和第5行好，但是第三行，有三个紫色矩形，我根本无法到达居中并调整到较小的尺寸而不会破坏桌子。

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

Answer 1

您需要更多列：

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>

Answer 2

这是一种家庭作业吗？无论如何，不要将表格单元格居中，而是尝试添加白色表格单元格。您需要更多列。而且你必须重新计算你的colspan属性。祝你好运！

Answer 3

这似乎并不太复杂。

只需在方格纸上绘制想要的结果，您就应该能够立即检测到要使用的正确rowspan / colspan值。

请注意，在写下HTML时，您需要完全跳过<td>...</td>的单元格，这些单元格最终会出现在序列中之前考虑的单元格的“扩展名”中。

例如，考虑一个简单的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>

如果要合并1和2，则需要在单元格1上声明colspan=2，然后省略单元格2.类似地，如果要合并5/6/8/9，则需要声明{{1单元格5上的colspan=2并省略合并的：

rowspan=2

Answer 4

一种替代方案可能是 flexbox 。我并不是说它比桌子好，但可以这样做：

请参阅：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

虽然我非常喜欢flexbox，但是对于这个问题，表格至少也是如此（尽管如果你想要的是改变正确的方式，flexbox可能会成为更好的解决方案）。

式：

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

注意：虽然此版本可以扩展，但也可以调整为具有固定的内容大小;但是，无论如何都可以轻松完成固定的内容大小（只需宽度宽度/高度填充等）。

HTML表格挑战

4 个答案: