HTML for Kids · Lesson

Tables: Organizing Data

Learn how to create tables for displaying information.

Tables: Organizing Data is a free HTML for Kids lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Tables: Organizing Data

Welcome to the next lesson! Today, we’ll learn how to create tables in HTML. Tables are great for organizing information in rows and columns.

2 What Are Tables?

Tables are a way to display information in a structured format. Each table consists of rows and columns.

Here’s what a table looks like:

Name      Age      City


Alice     12       New York


Bob       15       London

Let’s create this table using HTML!

3 Creating a Simple Table

Tables in HTML are created using the <table> tag. Rows are created using the <tr> tag, and cells are created using the <td> tag.

Example:

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

4 Adding a Table Header

You can add headers to your table using the <th> tag. Headers make your table more understandable.

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

5 Adding a Border to Your Table

By default, tables don’t have borders. You can add a border using the border attribute or with CSS.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

6 Spanning Columns and Rows

Sometimes, you might need a cell to span multiple columns or rows. Use the colspan or rowspan attribute to achieve this.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

9

7 Styling Your Table

You can make your table look better using CSS. For example, you can change colors, add padding, or align text.

Example:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

8 Try It Yourself

Let’s create a table that lists your favorite movies. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

10 Great Job!

Congratulations! You’ve learned how to create tables, add headers, and even style them. Tables are an excellent way to organize and display data. In the next lesson, we’ll learn about forms to collect user input. Get ready to make your pages interactive!

Tables: Organizing Data — illustration 10

Frequently asked questions

Is the “Tables: Organizing Data” lesson free?

Yes — the full text of “Tables: Organizing Data” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Tables: Organizing Data”?

Learn how to create tables for displaying information. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Tables: Organizing Data” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML for Kids