HTML tables

Tables are used to display content on a webpage in a tabular format (much like a spreadsheet).

This tutorial focuses on:

Table setup
Table rows
Table cells
Adding content to the table

Table setup

A table is created using the <table> tag and a closing </table> tag. A table consists of rows and columns.

Attributes of the <table> tag

border - takes a numeric value denoting the thickness of the border around the table.
cellspacing - takes a numeric value denoting how much space to put between cells.
cellpadding - takes a numeric value denoting how much padding to put between what is in the cells and the cell walls.

Table setup:

Table rows

Table rows are created using the <tr> tag which should go inside the <table> tag. Use an opening <tr> tag and its closing tag </tr> for every row in the table.

Adding rows to the table:

Table cells

Table cells are created using the <td> tag which should go inside the <tr> tag. Use an opening <td> tag and its closing tag </td> for every cell in the table.

Adding cells to the table:

Adding content to the table

Now that we have a structure for our table, we can add some content to it. The content of a table is placed inside the table's cells..so inside the <td> tags in the table.

Adding content to the table:

<table border="1" cellspacing="2" cellpadding="2"> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>HTML</td> <td>Javascript</td> </tr> <tr> <td>CSS</td> <td>PHP</td> </tr> </table>

What the table will look like:

First row, first column	First row, second column
HTML	Javascript
CSS	PHP

Read our HTML table concepts tutorial for much more info on working with tables.