Create a Simple HTML Table: Build a Weekly Coding Plan

Last updated:

This practical project builds on Example 4 – Table on Playcode123.com. Use that page for the basic syntax; here you will turn a table into a weekly coding plan, add useful headings, and troubleshoot your own changes.

What you will learn

By the end of this lesson, you will have a small coding schedule with clear headings and a readable layout. You will also know how to add a row without putting values under the wrong heading.

You need a text editor and a web browser. Save the complete example below as coding-plan.html, then open that file in your browser. No JavaScript, account, or extra library is needed.

First decide whether a table fits

Our schedule answers the same questions for each session: which day, which topic, and how many minutes? That repeated structure makes a table useful. A visitor can read down the Topic column or compare the session lengths.

If you only want to list three topics, a bullet list is simpler. If you want to place a sidebar next to an article, use CSS layout instead of a table. Choose a table because the information has meaningful rows and columns, not because you want visible boxes.

Start with a complete working page

The topics and times in this example are sample data. Change them to suit your own practice routine.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My weekly coding plan</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
      color: #172b3a;
      background: #ffffff;
    }
    main { max-width: 720px; margin: auto; }
    .table-scroll { overflow-x: auto; }
    .table-scroll:focus-visible {
      outline: 3px solid #175b93;
      outline-offset: 3px;
    }
    table { width: 100%; border-collapse: collapse; }
    caption {
      text-align: left;
      font-weight: bold;
      margin-bottom: 12px;
    }
    th, td {
      border: 1px solid #6b7d8b;
      padding: 12px;
      text-align: left;
      vertical-align: top;
    }
    thead { background: #eaf2f8; }
    tbody th { font-weight: 600; }
    .minutes { text-align: right; }
  </style>
</head>
<body>
  <main>
    <h1>My weekly coding plan</h1>
    <p>Three short sessions to practise building web pages.</p>
    <div class="table-scroll" role="region"
         aria-label="Weekly coding schedule" tabindex="0">
      <table>
        <caption>Practice sessions for this week</caption>
        <thead>
          <tr>
            <th scope="col">Day</th>
            <th scope="col">Topic</th>
            <th scope="col" class="minutes">Minutes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Monday</th>
            <td>HTML headings and paragraphs</td>
            <td class="minutes">20</td>
          </tr>
          <tr>
            <th scope="row">Wednesday</th>
            <td>CSS colours and spacing</td>
            <td class="minutes">25</td>
          </tr>
          <tr>
            <th scope="row">Friday</th>
            <td>A JavaScript button</td>
            <td class="minutes">30</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>

What should appear?

You should see a heading, a short introduction, and a bordered table. The table has three columns, one header row, and three session rows. The caption sits above it. The minutes align to the right, making the numbers easier to compare.

If your browser displays the code as plain text, check that the filename ends in .html, not .html.txt. If an edit does not appear, save the file and refresh the browser tab.

Read the structure one layer at a time

table contains the tabular information. Its caption names the table itself; the page heading names the whole page. Keeping both makes the table’s purpose clear even when the page later contains other sections.

thead groups the heading row, while tbody groups our practice sessions. Each tr creates one row. For this example, every row has three cells in the same order: Day, Topic, Minutes.

We use th for headers and td for ordinary values. The top headers have scope="col" because each describes a column. Monday has scope="row" because it identifies its entire session row. These relationships help assistive technologies interpret this simple table. Bold text alone does not express the same relationship.

Understand the CSS choices

The border belongs in CSS. You may encounter old examples using <table border="1">; use the CSS approach above for new work. border-collapse: collapse joins adjacent cell borders into single lines. Remove it briefly and compare the result, then put it back.

Padding creates space inside each cell. It does not create extra rows or columns. Try changing 12px to 4px: the information stays the same, but the cells become more compact.

The wrapper allows horizontal scrolling if the table cannot fit its available width. Its tabindex lets keyboard users focus the scrolling region, and the outline shows that focus. Short content may fit without any scrolling. Test with a narrow browser window and a longer topic to see the difference.

Common mistakes and how to find them

  • A value appears under the wrong heading: count the cells in that row and compare their order with the header row. A missing Topic cell can put the minutes under Topic.
  • The title appears inside the first data row: put the table title in caption, not in an extra td before Monday.
  • Headers are only bold paragraphs: use th within a tr. Appearance and table structure serve different purposes.
  • A narrow screen hides information: retain the scrolling wrapper and test it with your longest realistic content. Avoid fixing the whole page to a wide pixel width.

Your exercise

Add a Sunday session for “Review and fix one mistake”, lasting 15 minutes. Place it after Friday but before </tbody>. Then check that Sunday appears in Day and 15 appears in Minutes.

Try it yourself before reading the solution:

<tr>
  <th scope="row">Sunday</th>
  <td>Review and fix one mistake</td>
  <td class="minutes">15</td>
</tr>

Your finished table should now contain five rows altogether: one heading row and four session rows.

Extend it: add a progress column

Add <th scope="col">Progress</th> after the Minutes header. Then add one final td to every session row, containing “Planned”, “Started”, or “Finished”. Check each row separately: all rows should now have four cells.

Use the words even if you later add colours. A reader should not need to distinguish green from red to understand whether a session is finished.

Continue practising

Move the rules from the style element into a separate stylesheet when you are ready to share the same design across pages. Continue with A Separate style.css File, or explore more HTML lessons.

Reference for further study: MDN’s HTML table basics.