How To Create Tables in HTML

Introduction

A table is a set of data organized by rows and columns. Tables are useful for displaying connections between data types, such as products and their cost, employment and dates employed, or flights and departure times. In this tutorial, you will create a table using HTML, customize it by adding a desired amount of rows and columns, and add row and column headings to make your table easier to read.

Prerequisites

• Familiarity with HTML. If you are not familiar with HTML or need a refresher, you can review the first three tutorials of our How To Build a Website With HTML tutorial series.
• An index.html file to practice creating HTML tables. If you do not know how to create an index.html file, please follow the instructions in our brief tutorial How To Set Up Your HTML Project.

Fundamentals of HTML tables

An HTML table is created with an opening <table> tag and a closing </table> tag. Inside these tags, data is organized into rows and columns by using opening and closing table row <tr> tags and opening and closing table data <td> tags.

Table row <tr> tags are used to create a row of data. Inside opening and closing table <tr> tags, opening and closing table data <td> tags are used to organize data in columns.

As an example, here is a table that has two rows and three columns:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

To explore how HTML tables works in practice, paste the code snippet above into the index.html file or other html file you are using for this tutorial.

Save and reload the file in the browser to check your results. (For instructions on loading the file in your browser, please visit this step of our tutorial on HTML Elements.)

Your webpage should now have a table with three columns and two rows:

To add an additional row, add the highlighted <tr> element to the bottom of your table:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table> 

Save your results and check them in your browser. You should receive something like this:

To add another column, try adding an additional table data <td> element inside each of the table row <tr> elements:

<table>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4 </td>
  </tr>
  <tr> 
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

Save your results and check them in your browser. Your webpage should display a table with three rows and four columns:

Adding a Border To a Table

In general, tables should be styled with CSS. If you do not know CSS, you can add some light styling using HTML by adding the attributes to the <table> element. For example, you can add a border to the table with the border attribute:

<table border="1">
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
  </tr>
  <tr> 
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
 </tr>
</table>

Add the highlighted border attribute to your table and checking your results in the browser. (You can clear your index.html file and paste in the HTML code snippet above.) Save your file and load it in the browser. Your table should now have a border surrounding each of your rows and columns like this:

Adding Headings To Rows and Columns

Headings can be added to rows and columns to make tables easier to read. Table headings are automatically styled with bold and centered text to visually distinguish them from table data. Headings also make tables more accessible as they help individuals using screen readers navigate table data.

Headings are added by using opening and closing <th> tags. To add column headers, you must insert a new <tr> element at the top of your table where you can add the column names using <th> tags.

Clear the index.html file and add a row of column headings with the following code snippet:

<table border="1">
  <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
</table>

Save the index.html file and reload it in your browser. You should receive something like this:

Your webpage should display a single row of column headers. Note that the first column header is empty. You may add a column header here if you like.

To add row headers, you must add opening and closing <th> tags as the first item in every table row <tr> element. Add the row headers and data by adding the highlighted code snippet below between the closing </tr> tag and the closing <table> tag of the table in your index.html file:

<table border="1">
 <tr> 
    <th></th>
    <th>Column Header 1</th>
    <th>Column Header 2</th>
    <th>Column Header 3</th>
  </tr>
  <tr>
    <th>Row Header 1</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr> 
    <th>Row Header 2</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
 <tr> 
    <th>Row Header 3</th>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
 </tr>
</table>

Save the index.html file and reload it in your browser. You should receive something like this:

You should now have a table with with three column headings and three row headings.

Conclusion

In this tutorial, you have created an HTML table, added additional rows and columns, and created headings for rows and columns.

If you are interested in learning more about HTML, you can check our our tutorial series How To Build a Website With HTML. To learn about how to use CSS to style HTML elements (including tables), please visit our tutorial series How To Build a Website With CSS.