2016-03-18 4 views
0

この質問は既にこのフォーラムに掲載されていますが、表の行要素。私はcolgroupとcolspanを使用してみましたが、それぞれの追加によって多くのエラーと警告が発生します。私が理解できないことは、私が見ることができる(4)と計数が確立していないことです。私は括弧内の4は4列を意味すると推測しています。私の研究では、w3.orgテーブル構造WDGを訪問し、Web開発&デザインファウンデーションテキスト第7版のコンサルティングに加えて、多数のYoutubeビデオを見ました。私が警告手段を理解していれば、これを修正することができました。だから私はここに来て助けに来ます。ここに私のコードです。私は提案や手がかりを感謝します。テーブル行は1列幅で、第1行目(4)で設定された数よりも小さい

<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; 
} 

答えて

0

あなたは、この表にネストしている:1 <td><table class="second">を。しかしこのを囲む<td>は、その行(つまり最後の行)にある唯一の<td>であり、他のすべての行(すべて4つあります)の<td>の数と競合します。

+0

P.S .:申し訳ありませんが、最初の回答を書いたときに私は誤解しました。この "編集された"回答はまったく異なっています... – Johannes

+0

私はあなたに私の辛抱強さに感謝します。私はいつも素早く学習するわけではありません。私はついにそれを得た。私はネストされたテーブルを再構築するときに、最初からすべての行をテストしました。私の認識のポイントは、最後のデータセルにcolspan = 4を追加したときです。ここで、入れ子になったテーブルを配置します。次に、ネストされたテーブル自体が実際に1つのセルとして数えられることを理解しました。再び、私はあなたに感謝します。 – swydell

関連する問題