HTML Tables

Tables are useful for displaying a large amount of data inside columns and rows. You can think of a table similar to a spreadsheet with columns and rows of data. Take a look at the following code example:

<table>
  <tr>
    <td>Hiru</td>
    <td>Apprentice</td>
    <td>Sword</td>
  </tr>
  <tr>
    <td>Yoshi</td>
    <td>Master</td>
    <td>Staff</td>
  </tr>
</table>

The code above will have the following result:

Example HTML Table

As you can see in order to create a new table you will use the <table></table> tags. Then in order to add a table row you will use <tr></tr> tags. Next to create a column of data you will use the table data <td></td> tags.

In the Example table above we actually added a Border Attribute in the table tags.

<table border="1">
...
</table

The border attribute will give the table a border around each row and column. Additionally, we could provide another attribute called cellspacing that will add or remove spacing inbetween each of the cell blocks like so:

<table border="1" cellspacing="0">
...
</table

Which will result in the following:

Cellspacing Attribute

Tables can also include headers in order to explain each column. The table headers use the <th></th> tags. Take a look at the code example below of using these table header tags:

<table border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Rank</th>
    <th>Weapon</th>
  </tr>
  <tr>
    <td>Hiru</td>
    <td>Apprentice</td>
    <td>Sword</td>
  </tr>
  <tr>
    <td>Yoshi</td>
    <td>Master</td>
    <td>Staff</td>
  </tr>
</table>

The code above will look like the following:

HTML Table Headers

So, if you have a lot of data that needs to be displayed on a web page you may want to consider using a table. In the CSS section we'll show you how to stylize your tables more. Take a look at the following stylized table that we use throughout these tutorials:

Next, let's move on to learning about another way to format your content on your web pages by using HTML Div Elements.