Вложенная таблица help в HTML

Я застрял в этом упражнении с вложенными таблицами HTML, может кто-то предложить некоторую помощь?Вложенная таблица help в HTML

Я не могу получить синий заголовок, чтобы охватить 12 столбцов, которые я установил.

Я поставил colspan на два второго ряда <td> с до 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! * лицоpalm * – Nickolas

Ty Frederik, ха-ха. Простой контроль. Цените это! – Nickolas

Вложенная таблица help в HTML

ответ

Смежные вопросы