Displaying one page above another

J

jakey

Joined
Mar 29, 2023
Messages
26
Reaction score
1
Hello everyone!

Okay, I have created two web pages. The first one is a Premier League Football Table and the second is a season long form guide.
I have had both pages validated for HTML and CSS. There was no errors with either page.

What i would like to do is create another page which would display the Premier Football table and below that the Season Long Form
Guide. I have tried using a table to achieve this but all i get is a misshapened mess. Could some one show me where i'm going wrong
please. I do not have an online presence at the moment so i have included two screen shots.
Thanks in advance.
 

Attachments

  • Screenshot 2025-07-31 at 12-02-38 Premiership League Table 2025_26.png
    Screenshot 2025-07-31 at 12-02-38 Premiership League Table 2025_26.png
    150.7 KB · Views: 27
  • Screenshot 2025-07-31 at 12-23-58 Form Box.png
    Screenshot 2025-07-31 at 12-23-58 Form Box.png
    23.6 KB · Views: 24
VBService

VBService

Joined
Jul 4, 2023
Messages
609
Reaction score
81
You likely tried to nest both data tables inside a single parent <table>, which often leads to layout issues, especially if both tables have different column structures, styling, and headers. Tables were never designed to create general page layouts.

Using a <table> for general page layout is no longer recommended in modern web development. Tables should only be used for displaying tabular data, like a football league table or a form guide.


If you’re trying to display two separate sections (the Premier League Table and the Season Long Form Guide) one after the other on the same page, the best solution is to use modern layout techniques like CSS Flexbox or CSS Grid.

Example:
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">

    <style>
      html {
        font-size: 1rem;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 1rem;
      }
      main {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      section {
        border: 1px solid #ccc;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <h2>Premier League Table</h2>
        <!-- Paste your league table here -->
        <!-- e.g., <table>...</table> -->
      </section>

      <section>
        <h2>Season Long Form Guide</h2>
        <!-- Paste your form guide table here -->
        <!-- e.g., <table>...</table> -->
      </section>
    </main>
  </body>
</html>
 
J

jakey

Joined
Mar 29, 2023
Messages
26
Reaction score
1
Don't know what went wrong VBService but the league table is not displaying correctly whilst the season long form guide
displays fine? So once again may i ask for your help please.

I have attached a screenshot so that you can see the page in question.
The problem seems similar to my own attempts when trying previously.
 

Attachments

  • Screenshot 2025-08-01 at 07-53-44 Premier League Football Table.png
    Screenshot 2025-08-01 at 07-53-44 Premier League Football Table.png
    188.7 KB · Views: 18
VBService

VBService

Joined
Jul 4, 2023
Messages
609
Reaction score
81
Thanks for sharing the screenshot, it does help a bit! However, it would be even more helpful if you could show the HTML and CSS code for the page (the one shown in the image). It's difficult to tell exactly what’s wrong just by looking at the screenshot alone.

If the code is long, you could paste it into a website like:
Then just share the link here. That way it’ll be easier to check what might be causing the issue with the league table layout.
 
J

jakey

Joined
Mar 29, 2023
Messages
26
Reaction score
1
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premier League Football Table</title>
    
    <style>
        html {
            font-size: 1rem;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 1rem;
        }
        main {
            display: flex;
            flex-direction: column;       
            gap: 1rem;
        }
        section {
            border: 1px solid #ccc;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h2>Premier League Football Table</h2>
<!DOCTYPE html>
<html lang="en">
<head>

    <title>Premier League Football Table</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    <link rel="stylesheet" href="mystyles.css">

    <link rel="stylesheet" href="form.css">
    
</head>

<body>

    <div class="container" style="margin-top: 45px;">

    <h2 style="margin-bottom: 10px;">Premier League Table for 2025/26
    Season</h2>
    
    <table class="table">
    <tr>
        <th class="pos" style="text-decoration: underline;">Pos</th>
        <th class="space"></th>
        <th class="teams" style="text-align: center;
        text-decoration: underline;">Teams</th>
        <th class="space"></th>
        <th class="played" style="text-decoration: underline;">P</th>
        <th class="space"></th>
        <th class="won" style="text-decoration: underline;">W</th>
        <th class="drawn" style="text-decoration: underline;">D</th>
        <th class="lost" style="text-decoration: underline;">L</th>
        <th class="for" style="text-decoration: underline;">F</th>
        <th class="against" style="text-decoration: underline;">A</th>
        <th class="space"></th>
        <th class="won" style="text-decoration: underline;">W</th>
        <th class="drawn" style="text-decoration: underline;">D</th>
        <th class="lost" style="text-decoration: underline;">L</th>
        <th class="for" style="text-decoration: underline;">F</th>
        <th class="against" style="text-decoration: underline;">A</th>
        <th class="space"></th>
        <th class="goal_diff" style="text-decoration: underline;">Gd</th>
        <th class="space"></th>
        <th class="points" style="text-decoration: underline;">Pts</th>
        <th class="space"></th>
        <th class="report">Report</th>
        <th class="space"></th>
        <th class="form">Form Guide</th>
        </tr>
                                                                                                                                                        
        <tr>
        <td class="pos">1</td>
        <td class="space">
        <img src="lge_one_images/afc-wimbledon.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.afcwimbledon.co.uk/" target="_blank">
        AFC Wimbledon</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>
                                                                                                                                                
        <tr>
        <td class="pos">2</td>
        <td class="space">
        <img src="lge_one_images/barnsley.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.barnsleyfc.co.uk/" target="_blank">
        Barnsley</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                
        <tr>
        <td class="disabled" colspan="25">
            <hr>
        </td>
        </tr>
                                                                                                                                                
        <tr>
        <td class="pos">3</td>
        <td class="space">
        <img src="lge_one_images/blackpool.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.blackpoolfc.co.uk/" target="_blank">
        Blackpool</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                        
        <tr>
        <td class="pos">4</td>
        <td class="space">
        <img src="lge_one_images/boltonw.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.bwfc.co.uk/" target="_blank">
        Bolton Wanderers</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
          <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                        
        <tr>
        <td class="pos">5</td>
        <td class="space">
        <img src="lge_one_images/bradford-city.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.bradfordcityfc.co.uk/" target="_blank">
        Bradford City</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">
    
        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>
    
        </td>
        </tr>
                                                                                                            
        <tr>
        <td class="pos">6</td>
        <td class="space">
        <img src="lge_one_images/burtona.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.burtonalbionfc.co.uk/" target="_blank">
        Burton Albion</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
          <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
          </tr>
        </table>

        </td>
        </tr>
                                                                                                                                
        <tr>
        <td class="disabled" colspan="25">
            <hr>
        </td>
        </tr>
                                                                                                                                                            
        <tr>
        <td class="pos">7</td>
        <td class="space">
        <img src="lge_one_images/ccfc.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.cardiffcityfc.co.uk"
        target="_blank">Cardiff City</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                
        <tr>
        <td class="pos">8</td>
        <td class="space">
        <img src="lge_one_images/doncaster-rovers.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.doncasterroversfc.co.uk/"
        target="_blank">Doncaster Rovers</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">7</td>
        <td class="lost">4</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">
    
        <table class="table">
          <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
          </tr>
        </table>
    
        </td>
        </tr>
                                                                                                                              
        <tr>
        <td class="pos">9</td>
        <td class="space">
        <img src="lge_one_images/exeterc.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.exetercityfc.co.uk" target="_blank">
        Exeter City</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                
        <tr>
        <td class="pos">10</td>
        <td class="space">
        <img src="lge_one_images/huddersfieldt.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.htafc.com/" target="_blank">
        Huddersfield Town</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                
        <tr>
        <td class="pos">11</td>
        <td class="space">
        <img src="lge_one_images/leytono.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.leytonorient.com/"
        target="_blank">Leyton Orient</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                    
        <tr>
        <td class="pos">12</td>
        <td class="space">
        <img src="lge_one_images/lincolnc.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.weareimps.com" target="_blank">
        Lincoln City</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                    
        <tr>
        <td class="pos">13</td>
        <td class="space">
        <img src="lge_one_images/luto.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.lutontown.co.uk/en"
        target="_blank">Luton Town</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>8</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                        
        <tr>
        <td class="pos">14</td>
        <td class="space">
        <img src="lge_one_images/mansfieldt.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.mansfieldtown.net/" target="_blank">
        Mansfield Town</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                
        <tr>
        <td class="pos">15</td>
        <td class="space">
        <img src="lge_one_images/norhamtont.png" alt="Club logo"
         style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.ntfc.co.uk/" target="_blank">
        Northampton Town</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>00</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                      
        <tr>
        <td class="pos">16</td>
        <td class="space">
        <img src="lge_one_images/peterboro.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.theposh.com/" target="_blank">
        Peterborough United</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                    
        <tr>
        <td class="pos">17</td>
        <td class="space">
        <img src="lge_one_images/pma.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.pafc.co.uk"
        target="_blank">Plymouth Argyle</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>8</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
          <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
          </tr>
        </table>

        </td>
        </tr>
                                                                                                                
        <tr>
        <td class="pos">18</td>
        <td class="space">
        <img src="lge_one_images/port-vale.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.port-vale.co.uk/" target="_blank">
        Port Vale</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">
    
        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>
    
        </td>
        </tr>
                                                                                                                                                                                        
        <tr>
        <td class="pos">19</td>
        <td class="space">
        <img src="lge_one_images/reading.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams"><a href="https://www.readingfc.co.uk/"
        target="_blank">Reading</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td><td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                                
        <tr>
        <td class="pos">20</td>
        <td class="space">
        <img src="lge_one_images/rotherhamu.png" alt="Club logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.themillers.co.uk/" target="_blank">
        Rotherham United</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>

        </td>
        </tr>
                                                                                                                                
        <tr>
        <td class="disabled" colspan="25">
            <hr>
        </td>
        </tr>
                                                                                                                        
        <tr>
        <td class="pos">21</td>
        <td class="space">
        <img src="lge_one_images/stevenage.png" alt="Stevenage fc logo"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.stevenagefc.com/" target="_blank">
        Stevenage</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>
                                                                                                                        
        <tr>
        <td class="pos">22</td>
        <td class="space">
        <img src="lge_one_images/stockportc.png" alt="Stockport County fc"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.stockportcounty.com" target="_blank">
        Stockport County</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>
                                                                                                                        
        <tr>
        <td class="pos">23</td>
        <td class="space">
        <img src="lge_one_images/wigana.png" alt="Wigan Athletic fc"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.wiganathletic.com/" target="_blank">
        Wigan Athletic</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>
                                                                                                                        
        <tr>
        <td class="pos">24</td>
        <td class="space">
        <img src="lge_one_images/wycombew.png" alt="Wycombe Wanderers fc"
        style="width: 25px; height: 25px;"></td>
        <td class="teams">
        <a href="https://www.wwfc.com/" target="_blank">
        Wycombe Wanderers</a></td>
        <td class="space"></td>
        <td class="played">0</td>
        <td class="space"></td>
        <td class="won">0</td><td class="drawn">0</td>
        <td class="lost">0</td>
        <td class="for">0</td>
        <td class="against">0</td>
        <td class="space"></td>
        <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td>0</td>
        <td class="space"></td>
        <td><a href="https://www.bbc.co.uk/sport/football/live/------------"
        target="_blank">Report</a></td>
        <td class="space"></td>
        <td class="form">

        <table class="table">
        <tr>
            <td class="box-1" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-2" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-3" style="background-color: #B2BEB5;
            border: 1px solid #000;">W</td>
            <td class="box-4" style="background-color: #B2BEB5;
            border: 1px solid #000;">L</td>
            <td class="box-5" style="background-color: #B2BEB5;
            border: 1px solid #000;">D</td>
        </tr>
        </table>
        
        </td></tr>
        </table>
    
    </div>

</body>
</html>
        </section>
        
        <section>
            <h2>Season Long Form Guide</h2>
<!DOCTYPE html>
<html lang="en">
<head>

    <title>Form Box</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        .container {
            display: inline-block;
            width: 100%;
            margin: 100px; auto;
            border: 0;
            color: yellow;
        }
        
        .table {
            width: 880px;
            margin: auto;
            border: 0;
            border-collapse: collapse;
        }
        
        th, td {
            margin: auto;
            border: 1px solid #000;
            border-collapse: collapse;
        }
        
        h3 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            text-align: center;
            text-decoration: underline;
            color: #000;
        }
        
        .box-1 {
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: red;
            color: #fff;
        }
                
        .box-2 {
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: green;
            color: #fff;
        }
                
        .box-3 {
            width: 30px;
            height: 30px;
            text-align: center;
            background-color: gray;
            color: #fff;
        }
        
        /* unvisited link */
        a:link {
            color: white;
        }
        
        /* visited link */
        a:visited {
            color: white;
        }
        
        /* mouse over link */
        a:hover {
            color: yellow;
        }
        
        /* selected link */
        a:active {
            color: white;
        }
    </style>

</head>

<body>
    
    <div class="container">
    
    <h3>Season 2025/26 Form Guide for The Premier League</h3>
        
        <table spacing="0" class="table">
        <tr>
        <td style="text-decoration: underline; color: #000;
        text-align: center;">Home&nbsp;</td>
        <td class="box-1"><a href="https://www.bbc.co.uk/sport/football
        /live/c77n7v4z7ext"
        title="Man Utd vs West Ham Utd" target="_blank">1</a></td>
        <td class="box-2"><a href="https://www.bbc.co.uk/sport/football
        /live/cr58md2d428t"
        title="Man Utd vs Chelsea" target="_blank">2</a></td>
        <td class="box-3"><a href="https://www.bbc.co.uk/sport/football
        /live/c62nmkx0rrt"
        target="_blank">3</a></td>
        <td class="box-1"><a href="https://www.bbc.co.uk/sport/football
        /live/c62nmkx0rrt"
        target="_blank">4</a></td>
        <td class="box-2"><a href="https://www.bbc.co.uk/sport/football
        /live/c62nmkx0rrt"
        target="_blank">5</a></td>
        <td class="box-1">6</td>
        <td class="box-2">7</td>
        <td class="box-3">8</td>
        <td class="box-1">9</td>
        <td class="box-2">10</td>
        <td class="box-1">11</td>
        <td class="box-2">12</td>
        <td class="box-3">13</td>
        <td class="box-1">14</td>
        <td class="box-2">15</td>
        <td class="box-1">16</td>
        <td class="box-2">17</td>
        <td class="box-3">18</td>
        <td class="box-1">19</td>
        <td class="box-2">20</td>
        <td class="box-1">21</td>   
        <td class="box-2">22</td>
        <td class="box-3">23</td>
        </tr>
        
       <tr>
       <td style="text-decoration: underline; color: #000;
       text-align: center;">Away&nbsp;</td>
       <td class="box-1">24</td>
       <td class="box-2">25</td>
       <td class="box-3">26</td>
       <td class="box-1">27</td>
       <td class="box-2">28</td>
       <td class="box-1">29</td>
       <td class="box-2">30</td>
       <td class="box-3">31</td>
       <td class="box-1">32</td>
       <td class="box-2">33</td>
       <td class="box-1">34</td>
       <td class="box-2">35</td>
       <td class="box-3">36</td>
       <td class="box-1">37</td>
       <td class="box-2">38</td>
       <td class="box-1">39</td>
       <td class="box-2">40</td>
       <td class="box-3">41</td>
       <td class="box-1">42</td>
       <td class="box-2">43</td>
       <td class="box-1">44</td>
       <td class="box-2">45</td>
       <td class="box-1">46</td>
       </tr>
      </table>
              
    </div>

</body>

</html>
        </section>
    </main>
</body>
</html>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
609
Reaction score
81
You are trying to combine two web pages (the Premier League table and the Season Long Form Guide) into one. But inside your new page, you copied and pasted an entire second HTML document — including:
  • <!DOCTYPE html>
  • <html>, <head>, and <body>

This is not allowed in HTML. A valid HTML document can only have one <!DOCTYPE html>, <html>, <head>, and <body> tag. Including a full HTML page inside another breaks the structure of your document and causes layout and display issues.

Instead of pasting the whole second HTML file, you should only copy the content inside the <body> tag (the actual tables and headings). Then paste that content into your new combined page, inside the appropriate <section>.

Corrected code example
HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premier League Football Table</title>

    <link rel="stylesheet" href="mystyles.css">
    <link rel="stylesheet" href="form.css">

    <style>
      html {
        font-size: 1rem;
      }
      body {
        font-family: Arial, sans-serif;
        margin: 1rem;
      }
      main {
        display: flex;
        flex-direction: column;     
        gap: 1rem;
      }
      section {
        border: 1px solid #ccc;
        padding: 1rem;
      }
      h2 {
        margin-bottom: 1rem;
      }
      .table {
        border: 0;
        border-collapse: collapse;
        text-align: center;
      }

      /* only for table: Premier League Table for 2025/26 Season */
      #table1 th {     
        text-decoration: underline;
      }
      #table1 td {
        border: 0;
      }
      #table1 td.space img {
        width: 25px;
        height: 25px;
      }     
      #table1 td.form {
        display: flex;
        align-items: center;
      }
      #table1 td.form span {
        padding: 0 .35rem;
        background-color: #B2BEB5;
        border: 1px solid black;
        line-height: 1.1;
      }


      /* only for table: Season 2025/26 Form Guide for The Premier League */
      #table2 th, td {
        border: 1px solid black;     
      }
      #table2 .label {
        padding: 0 .25rem;
      }
      #table2 .box-1,
      #table2 .box-2,
      #table2 .box-3 {
        width: 30px;
        height: 30px;
        text-align: center;
        color: white;
      }
      #table2 .box-1 {
        background-color: red;     
      }
      #table2 .box-2 {
        background-color: green;
      }
      #table2 .box-3 {
        background-color: gray;
      }

      #table2 a:link {
        color: white;
      }   
      #table2 a:visited {
        color: white;
      }
      #table2 a:hover {
        color: yellow;
      }
      #table2 a:active {
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <h2>Premier League Table for 2025/26 Season</h2>
        <table id="table1" class="table">
          <thead>
            <tr>
              <th class="pos">Pos</th>
              <th class="space"></th>
              <th class="teams">Teams</th>
              <th class="space"></th>
              <th class="played">P</th>
              <th class="space"></th>
              <th class="won">W</th>
              <th class="drawn">D</th>
              <th class="lost">L</th>
              <th class="for">F</th>
              <th class="against">A</th>
              <th class="space"></th>
              <th class="won">W</th>
              <th class="drawn">D</th>
              <th class="lost">L</th>
              <th class="for">F</th>
              <th class="against">A</th>
              <th class="space"></th>
              <th class="goal_diff">Gd</th>
              <th class="space"></th>
              <th class="points">Pts</th>
              <th class="space"></th>
              <th class="report">Report</th>
              <th class="space"></th>
              <th class="form">Form Guide</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="pos">1</td>
              <td class="space">
                <img src="lge_one_images/afc-wimbledon.png" alt="Club logo">
              </td>
              <td class="teams">
                <a href="https://www.afcwimbledon.co.uk/"
                   target="_blank" rel="noopener noreferrer">AFC Wimbledon</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>     
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="pos">2</td>
              <td class="space">
                <img src="lge_one_images/barnsley.png" alt="Club logo">
              </td>
              <td class="teams">
                <a href="https://www.barnsleyfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Barnsley</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>       
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="disabled" colspan="25"><hr></td>
            </tr>
            <tr>
              <td class="pos">3</td>
              <td class="space">
                <img src="lge_one_images/blackpool.png" alt="Club logo">         
              </td>
              <td class="teams">
                <a href="https://www.blackpoolfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Blackpool</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>       
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="pos">4</td>
              <td class="space">
                <img src="lge_one_images/boltonw.png" alt="Club logo">
              </td>
              <td class="teams">
                <a href="https://www.bwfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Bolton Wanderers</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="pos">5</td>
              <td class="space">
                <img src="lge_one_images/bradford-city.png" alt="Club logo">
              </td>
              <td class="teams">
                <a href="https://www.bradfordcityfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Bradford City</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="pos">6</td>
              <td class="space">
                <img src="lge_one_images/burtona.png" alt="Club logo">               
              </td>
              <td class="teams">
                <a href="https://www.burtonalbionfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Burton Albion</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>             
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
            <tr>
              <td class="disabled" colspan="25"><hr></td>
            </tr>
            <tr>
              <td class="pos">7</td>
              <td class="space">
                <img src="lge_one_images/ccfc.png" alt="Club logo">               
              </td>
              <td class="teams">
                <a href="https://www.cardiffcityfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Cardiff City</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>             
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>         
            <!-- Remove this part of the code: FROM-->
            <tr><td>...</td></tr>
            <tr><td>...</td></tr>
            <tr><td>...</td></tr>
            <!-- Remove this part of the code: TO -->         
            <tr>
              <td class="pos">24</td>
              <td class="space">
                <img src="lge_one_images/wycombew.png" alt="Club logo">               
              </td>
              <td class="teams">
                <a href="https://www.wwfc.co.uk/"
                   target="_blank" rel="noopener noreferrer">Wycombe Wanderers</a>
              </td>
              <td class="space"></td>
              <td class="played">0</td>
              <td class="space"></td>
              <td class="won">0</td>
              <td class="drawn">0</td>
              <td class="lost">0</td>
              <td class="for">0</td>
              <td class="against">0</td>
              <td class="space"></td>
              <td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>0</td>
              <td class="space"></td>
              <td>
                <a href="https://www.bbc.co.uk/sport/football/live/------------"
                   target="_blank" rel="noopener noreferrer">Report</a>             
              </td>
              <td class="space"></td>
              <td class="form">
                <span class="box-1">L</span>
                <span class="box-2">W</span>
                <span class="box-3">L</span>
                <span class="box-4">D</span>
                <span class="box-5">L</span>
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>Season 2025/26 Form Guide for The Premier League</h2>
        <table id="table2" class="table">
          <tbody>
            <tr>
              <td class="label">Home</td>
              <td class="box-1">
                <a href="https://www.bbc.co.uk/sport/football/live/c77n7v4z7ext"
                   title="Man Utd vs West Ham Utd"
                   target="_blank">1</a>                   
              </td>
              <td class="box-2">
                <a href="https://www.bbc.co.uk/sport/football/live/cr58md2d428t"
                   title="Man Utd vs Chelsea"
                   target="_blank">2</a>                   
              </td>
              <td class="box-3">
                <a href="https://www.bbc.co.uk/sport/football/live/c62nmkx0rrt"
                   target="_blank">3</a>                   
              </td>
              <td class="box-1">
                <a href="https://www.bbc.co.uk/sport/football/live/c62nmkx0rrt"
                   target="_blank">4</a>                   
              </td>
              <td class="box-2">
                <a href="https://www.bbc.co.uk/sport/football/live/c62nmkx0rrt"
                   target="_blank">5</a>                   
              </td>
              <td class="box-1">6</td>
              <td class="box-2">7</td>
              <td class="box-3">8</td>
              <td class="box-1">9</td>
              <td class="box-2">10</td>
              <td class="box-1">11</td>
              <td class="box-2">12</td>
              <td class="box-3">13</td>
              <td class="box-1">14</td>
              <td class="box-2">15</td>
              <td class="box-1">16</td>
              <td class="box-2">17</td>
              <td class="box-3">18</td>
              <td class="box-1">19</td>
              <td class="box-2">20</td>
              <td class="box-1">21</td> 
              <td class="box-2">22</td>
              <td class="box-3">23</td>
            </tr>
            <tr>
              <td class="label">Away</td>
              <td class="box-1">24</td>
              <td class="box-2">25</td>
              <td class="box-3">26</td>
              <td class="box-1">27</td>
              <td class="box-2">28</td>
              <td class="box-1">29</td>
              <td class="box-2">30</td>
              <td class="box-3">31</td>
              <td class="box-1">32</td>
              <td class="box-2">33</td>
              <td class="box-1">34</td>
              <td class="box-2">35</td>
              <td class="box-3">36</td>
              <td class="box-1">37</td>
              <td class="box-2">38</td>
              <td class="box-1">39</td>
              <td class="box-2">40</td>
              <td class="box-3">41</td>
              <td class="box-1">42</td>
              <td class="box-2">43</td>
              <td class="box-1">44</td>
              <td class="box-2">45</td>
              <td class="box-1">46</td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
  </body>
</html>

1754235723641.png



BTW,

From
CSS: 
      #table2 .box-1,
      #table2 .box-2,
      #table2 .box-3 {
        width: 30px;
        height: 30px;
        text-align: center;
        color: white;
      }     
      #table2 .box-1 {
        background-color: red;       
      }
      #table2 .box-2 {
        background-color: green;
      }
      #table2 .box-3 {
        background-color: gray;
      }
To
CSS: 
  #table2 td:not(.label) {
    width: 30px;
    height: 30px;
    text-align: center;
    color: white;
  }
  #table2 td:not(.label):nth-child(3n+2) {
    background-color: red;
  }
  #table2 td:not(.label):nth-child(3n+3) {
    background-color: green;
  }
  #table2 td:not(.label):nth-child(3n+4) {
    background-color: blue;
  }

HTML: 
<style>
  html {
    font-size: 1rem;
  }
  body {
    font-family: Arial, sans-serif;
    margin: 1rem;
  }
  main {
    display: flex;
    flex-direction: column;       
    gap: 1rem;
  }
  section {
    border: 1px solid #ccc;
    padding: 1rem;
  }
  h2 {
    margin-bottom: 1rem;
  }
  .table {
    border: 0;
    border-collapse: collapse;
    text-align: center;
  }

  /* only for table: Season 2025/26 Form Guide for The Premier League */
  #table2 th, td {
    border: 1px solid black;       
  }
  #table2 .label {
    padding: 0 .25rem;
  }
  #table2 td:not(.label) {
    width: 30px;
    height: 30px;
    text-align: center;
    color: white;
  }
  #table2 td:not(.label):nth-child(3n+2) {
    background-color: red;
  }
  #table2 td:not(.label):nth-child(3n+3) {
    background-color: green;
  }
  #table2 td:not(.label):nth-child(3n+4) {
    background-color: blue;
  }

  #table2 a:link {
    color: white;
  }     
  #table2 a:visited {
    color: white;
  }
  #table2 a:hover {
    color: yellow;
  }
  #table2 a:active {
    color: white;
  }
</style>

<main>
  <section>
    <h2>Season 2025/26 Form Guide for The Premier League</h2>
    <table id="table2" class="table">
      <tbody>
        <tr>
          <td class="label">Home</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>   
          <td>22</td>
          <td>23</td>
        </tr>
        <tr>
          <td class="label">Away</td>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td>32</td>
          <td>33</td>
          <td>34</td>
          <td>35</td>
          <td>36</td>
          <td>37</td>
          <td>38</td>
          <td>39</td>
          <td>40</td>
          <td>41</td>
          <td>42</td>
          <td>43</td>
          <td>44</td>
          <td>45</td>
          <td>46</td>
        </tr>
      </tbody>
    </table>
  </section>
</main>
 
Last edited:
J

jakey

Joined
Mar 29, 2023
Messages
26
Reaction score
1
Hello there VBService
Can't begin to thank you enough for all the help and advice you have so generously given. With out your help a certain part of the web page would not have been used.

There is such a lot i have still to learn especially about HTML5 structural elements. So for the time being that is where i am going to remain in the hope that i will become some what better using HTML5 structural elements.

Dziekuje bardzo

Jakey
 

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

Need help with <rowspan> in an HTML table 1
How to push data from one HTML page to another 4
Can't wrap text around image and one more 1
Help with my responsive home page 2
Is it possible an iframe can overlapp another? 3
Only one table shows up with the information 2
Gallery - mosiac/grid layout with filtering and information page popup 1
Problem with a login script, SESSION user rights and put this together so it works with the other pages and MySQL. Code examples. 2

Members online

No members online now.
Total: 837 (members: 0, guests: 837)
Robots: 131

Forum statistics

Threads
474,348
Messages
2,571,452
Members
48,794
Latest member
Lonell Lee

Latest Threads

Top