HTML表挑战

我非常感谢帮助解决这个问题。我工作的一个HTML表格谜尝试这种形象在这里匹配：HTML表挑战

我把一切都很好，就双方使用行跨度标签两个红色的柱子，有第1，第2，第4，第五排好，但是第三排，我只是无法将三个紫色的矩形放在中心位置，并在不打破桌子的情况下调整到较小的尺寸。

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

来源

2015-11-07 Nickolas

虽然这里没有实际的数据，但我想不出任何适合该结构的东西。为什么你想用这个表？ – Quentin

请勿使用

进行设计/布局任务。 – guntbert

这只是一个家庭作业练习，不适用于任何实际或图形。谢谢帅哥 – Nickolas

回答

你需要更多的列：

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>

来源

2015-11-07 20:08:26 Oriol

更多专栏！而已。非常感谢您的帮助，我非常感谢您的明确和有益的回应。 ++ 你是一个拯救生命的人，我懂得更好的表格。谢谢你Oriol。 – Nickolas

@Nickolas完全没有:)随时接受答案，如果它解决了您的问题 – Oriol

我试着upvoting，并点击复选标记，我相信这是“接受”它是什么。希望如果不让我知道，我会很乐意给你信用。 – Nickolas

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

来源

2015-11-07 19:57:55 armin

是的阿明，这是一项家庭作业练习，只是练习，不适合任何实际。 ; P – Nickolas

我也很感谢你的时间！ – Nickolas

看起来确实不太复杂。

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

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

例如，考虑一个简单的4行×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，你需要在单元格5上声明colspan=2rowspan=2并省略合并的：

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

来源

2015-11-07 20:02:50 6502

谢谢6502，但为什么你会跳过扩展中单元格的表格数据标签？ – Nickolas

@Nickolas：因为这就是colspan/rowspan的工作方式......想象一下，在表格中，浏览器开始从左到右每行从第一行开始读取，直到最后一行寻找'...'定义。如果一个单元由于前一个单元使用了“colspan”/“rowspan”而被“覆盖”，那么该单元就被简单地跳过了。看到添加的例子。 – 6502

哦，ty！ StackOverflow是最好的。 – Nickolas

一种选择可能是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>

注：虽然这个版本尺度，也有可能被调整为具有固定内容的大小;然而，无论如何，固定内容大小可以轻松完成，只需div宽度宽度/高度填充等。

来源

2015-11-07 20:56:07 csga5000

嘿csga谢谢你让我知道flexbox，这是甜心的人。这是在HTML表格上进行的练习。 ;） – Nickolas

@Nickolas当然！我想你需要一个表格相关的答案;不过，我认为这对任何偶然发现你的问题寻找相关信息的人都有用。 – csga5000

回答

相关问题