/

HTML Tables: Mastering the Basics

HTML Tables: Mastering the Basics

In the early days of the web, HTML tables were a critical component for building layouts. However, with the advent of CSS and its layout capabilities, tables are now primarily used for organizing data. In this blog post, we will cover the basics of working with HTML tables and explore how to structure tables effectively.

The <table> Tag

To define a table, we use the <table> tag. Inside the table tag, we define the data in terms of rows and columns.

1
2
3
<table>

</table>

Rows

Rows are added using the <tr> tag, and they are the only elements that can be added directly inside the <table> element. 

1
2
3
4
5
<table>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

Column Headers

Column headers provide the names of the columns and are typically displayed in a bold font. We use the <th> tag to define the header.

1
2
3
4
5
6
7
8
9
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr></tr>
 <tr></tr>
</table>

The Table Content

The content of the table is defined using the <td> tags inside the <tr> elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td>Row 1 Column 1</td>
 <td>Row 1 Column 2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td>Row 2 Column 1</td>
 <td>Row 2 Column 2</td>
 <td>Row 2 Column 3</td>
 </tr>
</table>

Spanning Columns and Rows

A row can span over multiple columns using the colspan attribute, and it can span over multiple rows using the rowspan attribute.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td colspan="2">Row 1 Columns 1-2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td colspan="3">Row 2 Columns 1-3</td>
 </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
 <tr>
 <th>Column 1</th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
 <td>Row 1 Column 3</td>
 </tr>
 <tr>
 <td>Row 2 Column 3</td>
 </tr>
</table>

Row Headings

Similar to column headings, we can add row headings by using the <th> tag as the first element inside a <tr>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
 <tr>
 <th></th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 <tr>
 <th>Row 1</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 <tr>
 <th>Row 2</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
</table>

Additional Tags for Table Organization

To enhance the organization of large tables and properly define the header and footer sections, we can use the following tags:

  • <thead>: Wraps the header row(s) of the table
  • <tbody>: Wraps the body rows of the table
  • <tfoot>: Wraps the footer row(s) of the table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
 <thead>
 <tr>
 <th></th>
 <th>Column 2</th>
 <th>Column 3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>Row 1</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 <tr>
 <th>Row 2</th>
 <td>Col 2</td>
 <td>Col 3</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td>Footer of Col 1</td>
 <td>Footer of Col 2</td>
 </tr>
 </tfoot>
</table>

Table Caption

It is good practice to provide a <caption> tag immediately after the opening <table> tag to describe the content of the table.

1
2
3
4
5
6
7
8
9
10
11
<table>
 <caption>Dogs age</caption>
 <tr>
 <th>Dog</th>
 <th>Age</th>
 </tr>
 <tr>
 <td>Roger</td>
 <td>7</td>
 </tr>
</table>

By following these guidelines, you can effectively structure and organize your HTML tables. It’s important to note that CSS can be used to style the tables further, making them visually appealing and easier to read.

Tags: HTML tables, table structure, HTML basics