Part of the Series: How To Build a Website With HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

HTML tables are useful for arranging content in rows and columns. This tutorial will teach you how to add a table to your webpage and how customize it by adding a desired amount of rows and columns.

A <table> element requires the use of one or more table row <tr> elements, which create table rows, and one or more table data <td> elements, which insert content into table columns. Each of these elements require an opening and closing tag. The table data <td> elements go inside the table row <tr> elements, and the table row <tr> elements go inside the <table> elements. For 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>

Clear your index.html file and paste the code snippet above into the document. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.)

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:

3 columns, 2 rows table

To add an additional row, add another <tr> element like so:

<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:

3 Columns and 3 Rows Table

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

<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. You should receive something like this:

4 Columns, 3 Rows Table

Tables can be styled by adding attributes to the <table> element. For example, you can add a border to the table with the border attribute like so:

<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>

Try adding the 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. You should receive something like this:

Table with Border

You should now understand how to add tables to your webpage and how to customize the amount of rows and columns a table contains. Tables can also be used to arrange content on your web page. There are also many other attributes you can use to style your table. We’ll return to tables as a layout tool and explore their styling possibilities later on in this tutorial series when we begin building our website.

0 Comments

Creative Commons License