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

Question

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

Johannes · Accepted Answer · 2016-03-19T00:18:32.023

0

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

edited Mar 19 '16 at 00:18

answered Mar 19 '16 at 00:12

Johannes

64,305
18
73
130

P.S.: sorry, I misunderstood something when I wrote the first version of my answer - this "edited" answer is completely different... – Johannes Mar 19 '16 at 00:19
I owe you a ton of gratitude for your patience with me. I'm not always a quick learner. I finally got it, though. I reworked everything from the beginning, testing each table row as I build the nested table again. The point of recognition for me was when I added a colspan=4 to the last data cell where I put nested table. Then I understood that the nested table itself was actually counted as one cell, so increasing the cell to span 4 columns made sense. Again, I thank you. – swydell Mar 19 '16 at 19:52

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

1 Answers1