表格行为1列宽,小于第1行(4)建立的计数

时间:2016-03-18 23:07:20

标签: html html5 html-table col colgroup

虽然这个问题已经出现在这个论坛中,但它并没有解决我的特殊问题,因为我的列是在表行元素中专门定义的。我尝试过使用colgroup和colspan,每次添加都会导致更多的错误和警告。我不明白的是,我的计数并不符合(4)我能看到的。我猜测括号内的4表示4列。在我的研究中,我访问了w3.org桌面结构,WDG,并观看了许多Youtube视频以及咨询Web Development&设计基础文本第7版。如果我理解警告意味着,我可以解决这个问题。所以我来这里寻求帮助。这是我的代码。我很感激任何建议或线索。

 <table class="first">
 <caption>TV Programs I Watch Most</caption>
 <thead>
 <tr>
    <th id="name">Network</th>
    <th id="shows">Favoite Shows</th>
    <th id="chan">Channel</th>
    <th id="sche">Schedule</th>
  </tr>
   </thead> 
  <tbody>
  <tr>
   <td headers="name">AJAM</td>
   <td headers="shows">Inside Story</td>
   <td headers="chan">347</td>
   <td headers="sche">M-F 8:30PM</td>
   </tr>
   <tr>
   <td headers="name">BET</td>
   <td headers="shows">Tyler Perry</td>
   <td headers="chan">329</td>
   <td headers="sche">M-F 1:00PM</td>
  </tr>
  <tr>
   <td headers="name">MSNBC</td>
   <td headers="shows">Rachel Maddow</td>
   <td headers="chan">356</td>
   <td headers="sche">M-F 9:00PM</td>
  </tr>
  <tr>
   <td headers="name">LINK</td>
   <td headers="shows">Democracy Now</td>
   <td headers="chan">375</td>
   <td headers="sche">M-F 9:00AM</td>
   </tr>

   <tr>
    <td>
        <table class="second">
        <caption>Show Rankings</caption>

            <tr>
                <th rowspan="5">My Take</th>
                <th id="show">show</th>
                <th id="rank">rank</th>

            </tr>   

            <tr>

                <td headers="show">Inside Story</td><td rowspan="2"         headers="rank">5</td>
            </tr>
            <tr>
                <td headers="show">Rachel Maddow</td><!-- <td     headers="rank"></td> -->
            <tr>
                <td headers="show">Democracy Now</td><td headers="rank">4</td>
            </tr>
            <tr>
                <td headers="show">Tyler Perry</td><td    headers="rank">3</td>
            </tr>

        </table>
    </td>
    </tr>
 </tbody>
 </table>

我也要包含CSS代码:

    h1{
    margin-bottom:0px;
   }
  h2{
  font-size:1.5em;
 margin:0px 0px;
 }
 nav{

 margin-bottom:15px;
 }

 nav a{
 color:#96e;
 background-color:#cecece;
 text-decoration:none;
 padding-right:10px;

 }  


 caption{
line-height:150%;
font-size:1.5em;
font-style:italic;
}
table.main{
border-spacing:3px;
}
table.main thead{
background-color:#96e;
color:#ffffff;
text-align:left;
}
table.main td{
 background-color:#eaeaea;
 color:#96e;
vertical-align:top;
 }
 table.first{
font-family: Times, "Times New Roman", Georgia, serif;
width:50%;
height:auto;
border-style:inset;
border-spacing:3px;
background-color:#cecece;
color:#808080;
text-align:left;
padding-bottom:5px;
}

table.second{
font-family:"Lucida Console", Courier, monospace;
width:300px;
border-spacing:2px;
background-color:#c0c0c0;
color:#808080;
border:1px dashed #eaeaea;
text-align:left;
padding:5px;
}

table.second th{
background-color:#96e;
color:#ffffff;
text-align:center;
} 
table.second td{
background-color:#eaeaea;
color:#000000;
text-align:center;
vertical-align:middle;
}

table a{
text-decoration:none;
}
#rank{
color:#00bfff;
} 
#show{
color:#00bfff;
}
#name{
color:#00bfff;
}
#shows{
color:#00bfff;
}
#chan{
color:#00bfff;
}
#sche{
color:#00bfff;
}
.first th{
background-color:#96e;
color:#96e;
}
.second th{
background-color:#96e;
color:#96e;
}

1 个答案:

答案 0 :(得分:0)

您已将此表格<td>嵌套到一个<td>中。但围绕<td>是其中唯一<td>行(即最后一行),与所有其他行中的{{1}}数量冲突都有四个。)