Need help with <rowspan> in an HTML table

Joined
Mar 29, 2023
Messages
14
Reaction score
1
Have decided to create a table of the Football team i support which contains sections that has Dates played, Teams played throughout the season, a link to the match played, and finally the date of their next match. But when i tried to put the names of the players who scored beneath the teams that played i had to use "rowspan" and even though i have had the page validated at W3C Markup Validation Service i was warned that: A table row was 5 columns wide and exceeded the column count established by the first row (4). My tired old eyes can't see where to resolve this warning?

Here is the code i used:
Code:
<!DOCTYPE html>
<html lang="en">
<head>

    <title>HTML Rowspan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
    
        #container {
            width: 80%;
            margin: 100px auto;
            border: 2px solid blue;
            border-radius: 20px;
        }
        
        .table {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }
        
        date {
            width: 200px;
        }
                
        teams {
            width: 400px;
        }
                
        match report {
            width: 150px;
            text-align: center;
        }
        
        next game {
            width: 200px;
            text-align: center;
        }
        
        caption {
            font-size:36px;
            text-decoration: underline;
            padding-top: 20px;
        }
        
        th {
            text-decoration: underline;
        }
        
        td {
            border: 1px solid #004400;
            text-align: center;
        }
    
    </style>

</head>

<body>

    <div id="container">
    
    <table class="table">
        <caption>Using Rowspan in an HTML Table?</caption>
        <tr>
            <th>Date</th>
            <th>Teams</th>
            <th>Report</th>
            <th>Next Game</th>
        </tr>
        
        <tr>
            <td rowspan="2">Some day in 2024</td>
            <td rowspan="2">team one 2 - 1 team two<br>
            <span style="font-size: 14px;">player one(74') player two(90'+2 pen)</span></td>
            <td rowspan="2"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td rowspan="2">Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
        <tr>
            <td></td>
        </tr>
        
        <tr>
            <td>Some day soon<sup>th</sup> Month 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
                        
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
                
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
                
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
                
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
                
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
                
        <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td style="text-align: center"><a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a></td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
        </tr>
        
    </table>                
            
    </div>

</body>

</html>

Would someone please check my use of "rowspan" to see if it it correct?

Very big thanks everyone
 
Last edited:
Joined
Jul 4, 2023
Messages
508
Reaction score
63
IMHO,
The use of rowspan in this example is inefficient and goes against the rules of proper table structure in HTML because an additional empty <tr></tr> row is needed to maintain the table's structure. This, however, leads to a validation error.

HTML:
<table class="table">
        <caption>Using Rowspan in an HTML Table?</caption>
        <thead>
          <tr>
            <th>Date</th>
            <th>Teams</th>
            <th>Report</th>
            <th>Next Game</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">Some day in 2024</td>
            <td rowspan="2">
              team one 2 - 1 team two<br>
              <span>player one(74') player two(90'+2 pen)</span>
            </td>
            <td rowspan="2">
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td rowspan="2">Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr></tr> <!-- OMIT this row as it’s invalid -->

          <!-- Continue with next rows without the empty row -->
          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <!-- Additional rows follow the same structure -->

        </tbody>
      </table>

BTW,
your html code after a little refactoring ;)
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Rowspan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
      #container {
        width: 80vw;
        margin: 100px auto;
        border: 2px solid blue;
        border-radius: 20px;
      }
      .table {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
      }
      th:nth-child(1), /* Date */
      th:nth-child(4)  /* Next Game */
      {
        width: 200px;
      }
      th:nth-child(2)  /* Teams */
      {
        width: 400px;
      }
      th:nth-child(3)  /* Report */
      {
        width: 100px;
      }
      caption {
        font-size: 36px;
        text-decoration: underline;
        padding-top: 20px;
      }
      th {
        text-decoration: underline;
      }
      td {
        border: 1px solid #004400;
        text-align: center;
      }
      td span {
        font-size: 14px;
      }
    </style>
  </head>
  <body>

    <div id="container">
      <table class="table">
        <caption>Using Rowspan in an HTML Table?</caption>
        <thead>
          <tr>
            <th>Date</th>     <!-- nth-child(1) -->
            <th>Teams</th>    <!-- nth-child(2) -->
            <th>Report</th>   <!-- nth-child(3) -->
            <th>Next Game</th><!-- nth-child(4) -->
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some day in 2024</td>
            <td>
              team one 2 - 1 team two<br>
              <span>player one(74') player two(90'+2 pen)</span>
            </td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> Month 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>

          <tr>
            <td>Some day soon<sup>th</sup> October 2024</td>
            <td>Team one 2 - 1 Team two</td>
            <td>
              <a href="https://www.bbc.co.uk/sport/football/live/vctj7pyyhc" target="_blank">Report</a>             
            </td>
            <td>Some day soon<sup>th</sup> Month 2024</td>
          </tr>
        </tbody>
      </table>       
    </div>
  </body>
</html>

... and
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proper Rowspan Example</title>
    <style>
      table {
        width: 80%;
        margin: 2rem auto;
        border-collapse: collapse;
      }
      caption {
        font: 500 .8rem/2 system-ui, monospace, sans-serif;
        text-align: left;
      }
      th, td {
        border: 1px solid #333;
        padding: .75rem;
        text-align: center;
      }
      th {
        font: 700 1rem/1 system-ui, monospace, sans-serif;
        background-color: gray;
        color: white;
      }
    </style>
  </head>
  <body>

    <table>
      <caption>Proper Rowspan Example Table</caption>
      <thead>
        <tr>
          <th>Category</th>
          <th>Item</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3">Electronics</td>
          <td>Phone</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
        <tr>
          <td>Tablet</td>
          <td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
        </tr>
        <tr>
          <td>Laptop</td>
          <td>Maecenas faucibus mollis interdum.</td>
        </tr>
        <tr>
          <td rowspan="2">Furniture</td>
          <td>Chair</td>
          <td>Vivamus sagittis lacus vel augue laoreet rutrum.</td>
        </tr>
        <tr>
          <td>Table</td>
          <td>Fusce dapibus, tellus ac cursus commodo.</td>
        </tr>
        <tr>
          <td rowspan="2">Appliances</td>
          <td>Washing Machine</td>
          <td>Etiam porta sem malesuada magna mollis euismod.</td>
        </tr>
        <tr>
          <td>Refrigerator</td>
          <td>Curabitur blandit tempus porttitor.</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
1730930629422.png
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,056
Messages
2,570,441
Members
47,101
Latest member
DoloresHol

Latest Threads

Top