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

相關問題