We use cookies to enhance your experience on the site

HTML Tables

HTML tables are an important element of a web page's structure that allows data to be presented in a clear, grid form consisting of rows and columns. If you have trouble distinguishing which are rows and which are columns - remember that rows are horizontal and columns are vertical!

Let's say we want to create a simple table presenting people's data:

| First Name | Last Name | |------------|-----------| | John | Doe | | Jane | Doe |

The HTML code for such a table could look like this:

1<table>
2  <tr>
3    <td>John</td>
4    <td>Doe</td>
5  </tr>
6  <tr>
7    <td>Jane</td>
8    <td>Doe</td>
9  </tr>
10</table>

Let's break this code into parts to better understand what each element does:

<table>

: This tag opens the table. Everything between the opening

<table>

tag and the closing

</table>

tag is treated as part of the table.

<tr>

: Table row. We open each row with the

<tr>

tag and close it with

</tr>

. Rows create horizontal lines of our table.

<td>

: Table cell. Within each row, cells are defined using the

<td>

tag (from "table data"). This is where we place the specific data we want to present in the table.

In the above example, we created a table with two rows, each containing two cells.

Table Sections

HTML also allows dividing the table into sections, such as header (

<thead>

), body (

<tbody>

), and footer (

<tfoot>

). This structure can be useful when dealing with larger amounts of data.

Adding Table Headers

Often we want the first row of the table to have headers that describe the column contents. For this purpose, we use the

<th>

tag instead of

<td>

1<table>
2<tr>
3  <th>Planet</th>
4  <th>Distance from the Sun (km)</th>
5</tr>
6<!-- Remaining rows -->
7</table>

Adding Borders and Spacing

You can add borders and spacing between cells using the border and cellspacing attributes, although today tables are often styled using CSS.

1<table border="1" cellspacing="0">
2  <!-- Rows and cells -->
3</table>

Tables and CSS In practice, CSS is often used together with HTML to give tables a more attractive look and make them more readable. Knowledge of CSS will therefore be essential when we want to create really impressive tables. But we'll talk about that in the next chapters!

Remember, tables are just one of many elements that help present data on a web page. It's good to learn to use them effectively!

Exercise: Creating HTML Tables

In this exercise, you'll learn to create HTML tables that allow data to be presented in a clear, grid form consisting of rows and columns. Your task will be to create a web page containing a table with data of your choice.

Step 1: Create the Basic HTML Document Structure

First, create a new HTML file and add the basic HTML document structure.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML Table</title>
7</head>
8<body>
9    <main>
10        <!-- Place your table here -->
11    </main>
12</body>
13</html>

Step 2: Add an HTML Table

Now add a table inside the

<main>

element. Start by defining the table and the first row with column headers.

1<table border="1" cellspacing="0">
2    <thead>
3        <tr>
4            <th>First Name</th>
5            <th>Last Name</th>
6        </tr>
7    </thead>
8    <tbody>
9        <tr>
10            <td>John</td>
11            <td>Doe</td>
12        </tr>
13        <tr>
14            <td>Jane</td>
15            <td>Doe</td>
16        </tr>
17    </tbody>
18</table>

Step 3: Add Additional Rows of Data

Expand the table with additional rows to present more data.

1<tbody>
2    <tr>
3        <td>John</td>
4        <td>Doe</td>
5    </tr>
6    <tr>
7        <td>Jane</td>
8        <td>Doe</td>
9    </tr>
10    <tr>
11        <td>Mary</td>
12        <td>Smith</td>
13    </tr>
14    <tr>
15        <td>James</td>
16        <td>Johnson</td>
17    </tr>
18</tbody>

Step 4: Add CSS Styling

Now add CSS styles to improve the table's appearance. You can add an internal stylesheet in the

<head>

section.

1<head>
2    <style>
3        table {
4            width: 100%;
5            border-collapse: collapse;
6        }
7        th, td {
8            padding: 8px;
9            text-align: left;
10            border: 1px solid #ddd;
11        }
12        th {
13            background-color: #f2f2f2;
14        }
15    </style>
16</head>

Result

After completing all steps, your HTML file should look like this:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML Table</title>
7    <style>
8        table {
9            width: 100%;
10            border-collapse: collapse;
11        }
12        th, td {
13            padding: 8px;
14            text-align: left;
15            border: 1px solid #ddd;
16        }
17        th {
18            background-color: #f2f2f2;
19        }
20    </style>
21</head>
22<body>
23    <main>
24        <table border="1" cellspacing="0">
25            <thead>
26                <tr>
27                    <th>First Name</th>
28                    <th>Last Name</th>
29                </tr>
30            </thead>
31            <tbody>
32                <tr>
33                    <td>John</td>
34                    <td>Doe</td>
35                </tr>
36                <tr>
37                    <td>Jane</td>
38                    <td>Doe</td>
39                </tr>
40                <tr>
41                    <td>Mary</td>
42                    <td>Smith</td>
43                </tr>
44                <tr>
45                    <td>James</td>
46                    <td>Johnson</td>
47                </tr>
48            </tbody>
49        </table>
50    </main>
51</body>
52</html>

Now you have a complete web page with a table presenting data. Experiment further by adding more rows, columns, or changing styles with CSS to improve the table's appearance.

Go to CodeWorlds→