Need help with <rowspan> in an HTML table

J

jakey

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

VBService

Joined
Jul 4, 2023
Messages
475
Reaction score
58
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

Similar Threads

Can anyone please help? HTML - two tables applying different styles 4
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
I need help fixing my website 2
Help with my responsive home page 2
Help needed with thank you message 5
Help with code 0
SendGrid email issue in responsive Gmail 1

Members online

Total: 71 (members: 2, guests: 69)
Robots: 77

Forum statistics

Threads
473,977
Messages
2,570,176
Members
46,711
Latest member
LidaLoya4

Latest Threads

Top