嵌套HTML表格幫助

我被困在這個練習與HTML嵌套表，可有人提供一些幫助？嵌套HTML表格幫助

我似乎無法獲得藍色標題，以跨越我設置的12列。

我在兩個第二行設置colspan<td> s至colspan="6"所以每個將佔用的寬度的一半，而colspan="12"上我認爲將填充寬度的整體的頭部，但它不限於半寬度，我不確定我做錯了什麼。

這是它應該是這樣的：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
    <style> 

     body {background-color:black; 
     } 

     table { 
       width:580px; 
       height:300px; 
       border:2px auto; 
       margin: 0px auto; 
      } 

     .grey {background-color:grey;} 
     .blue {background-color:blue;} 
     .red {background-color:red; color:grey;} 
     .cyan {background-color:cyan;color:grey;} 
     .green {background-color:lime;color:grey;} 


     #outer {color: white; 
      text-align: center; 

     } 
     #greytext { 
        color:#333; 
        width:150px; 
      } 

     #nested {width:150px; 
       height:90px; 
       border:2px solid black; 
       } 

     #nestedtext {color:#666; 
        width:60px; 
        font-size:21px;}  

      } 
    </style> 

</head> 

<body> 

    <table> 
     <tr> 
      <td ="colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td> 
     </tr> 

     <tr> 
      <td rowspan="6" colspan="6" class="grey"> 
      <p id="greytext">This is an example of nested tables. 
      </td> 

      <td rowspan="6" colspan="6" class="grey"> 
       <table id="nested"> 
        <tr> 
         <td rowspan="4" colspan="1"> 
          <p id="nestedtext">Pick a color</p> 
         </td> 
        </tr> 

        <tr rowspan="1" colspan="2"> 
          <td class="red"><p>Red</p></td> 
        </tr> 
        <tr rowspan="1" colspan="2"> 
         <td class="cyan"><p>Blue</p></td> 
        </tr> 
        <tr rowspan="1" colspan="2"> 
         <td class="green"><p>Green</p></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2015-11-08 Nickolas

你能告訴我，其實你想要什麼兄弟。用簡單的語言，像這樣一張桌子，這樣就解決了問題。謝謝 –

我不確定你是什麼意思，但是我在帖子中說過跨越藍色頂行到12列。 Tyvm – Nickolas

在你的第一個單元格，你有一個主導=」刪除它解決了這個問題

body { 
 
    background-color: black; 
 
} 
 
table { 
 
    width: 580px; 
 
    height: 300px; 
 
    border: 2px auto; 
 
    margin: 0px auto; 
 
} 
 
.grey { 
 
    background-color: grey; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
} 
 
.red { 
 
    background-color: red; 
 
    color: grey; 
 
} 
 
.cyan { 
 
    background-color: cyan; 
 
    color: grey; 
 
} 
 
.green { 
 
    background-color: lime; 
 
    color: grey; 
 
} 
 
#outer { 
 
    color: white; 
 
    text-align: center; 
 
} 
 
#greytext { 
 
    color: #333; 
 
    width: 150px; 
 
} 
 
#nested { 
 
    width: 150px; 
 
    height: 90px; 
 
    border: 2px solid black; 
 
} 
 
#nestedtext { 
 
    color: #666; 
 
    width: 60px; 
 
    font-size: 21px; 
 
} 
 
}

<table> 
 
    <tr> 
 
    <td colspan="12" rowspan="1" class="blue"> 
 
     <p id="outer">Outer Table</p> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td rowspan="6" colspan="6" class="grey"> 
 
     <p id="greytext">This is an example of nested tables. 
 
    </td> 
 

 
    <td rowspan="6" colspan="6" class="grey"> 
 
     <table id="nested"> 
 
     <tr> 
 
      <td rowspan="4" colspan="1"> 
 
      <p id="nestedtext">Pick a color</p> 
 
      </td> 
 
     </tr> 
 

 
     <tr rowspan="1" colspan="2"> 
 
      <td class="red"> 
 
      <p>Red</p> 
 
      </td> 
 
     </tr> 
 
     <tr rowspan="1" colspan="2"> 
 
      <td class="cyan"> 
 
      <p>Blue</p> 
 
      </td> 
 
     </tr> 
 
     <tr rowspan="1" colspan="2"> 
 
      <td class="green"> 
 
      <p>Green</p> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2015-11-08 20:49:01 AlfonsoML

Weeeee，ty Alfonso！愚蠢的小錯誤，在梳理我的代碼時完全忽略它。 – Nickolas

你有足夠的代表，你應該認識到，由小印刷錯誤引起的問題應該關閉，而不是回答。 – cimmanon

對我來說，說「這是一個錯誤，所以我不會回答」。很明顯，問題可以解決，但首先提供答案更簡單。 – AlfonsoML

貌似就行了簡單的拼寫錯誤：<td ="colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td>

它應該是：<td colspan="12" rowspan="1" class="blue"><p id="outer">Outer Table</p></td>

作品在此琴：https://jsfiddle.net/Lajf9v0d/

來源

2015-11-08 20:53:35

Doh！ * facepalm * – Nickolas

Ty Frederik，哈哈。簡單的監督。欣賞它！ – Nickolas

嵌套HTML表格幫助

回答

相關問題