Search code examples
htmlhtml-tablecolcolgroup

A table row was 1 columns wide, which is less than the count established by the 1st row(4)


Although this question has already appeared in this forum, it does not address my particular problem because my columns were specifically defined inside the table row element. I've tried using colgroup and colspan and each addition causes more errors and warnings. What I don't understand is that my count was not established with (4) that I can see. I'm guessing the 4 inside the parenthesis means 4 columns. In my research I visited w3.org table structure, WDG, and watched numerous Youtube videos in addition to consulting Web Development & Design Foundation text 7th edition. I could fix this if I understood the warning means. So I come here for help. Here is my code. I'd appreciate any suggestions or clues.

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

I'm going to include the CSS code as well:

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

Solution

  • You have nested this table: <table class="second"> into one <td>. But this surrounding <td> is the only <td> in it's row (i.e. the last row), which conflicts with the number of <td> in all other rows (which all have four).