Tables enable you to easily present data and information in such a way that it is also easy to read and understand.

Tables are just a collection of cells. Or to be more accurate, it is just columns and rows of cells that contain information such as text, numbers, links, other tables, images and other content.

We are not going to make you think, however, that tables are a breeze to create in HTML. As you have more cells, columns and rows, you will find that the code you have to write becomes a little bit more unwieldy too.

Nevertheless, knowing the basics and practicing would allow you to get tables right.

When to Use Tables and When Not to

First, let us be clear that tables are not to be used for layouting, formatting and positioning. For example, if you need to have a block quote, or spaces around images, do not use a table for it, you can get similar results using other HTML tags.

You should only use tables if you have to present data. If your content makes sense when you use a spreadsheet to present it, then you should use a table to put it on an HTML document.

Creating Tables

The <table> tag defines all tables in an HTML document. To make it easier for you to hard-code your table, you should always remember that HTML tables work first with rows (designated by the <tr> tag) , then columns (defined by the <td> tag).

Let us start with just one cell. To do this, use the following code:

<table border=”1″>
<tr>
<td>one cell</td>
</tr>
</table>

This will show up as:

The border attribute shows the gridlines for your table.

Next, try to create a table with just one row, but three different columns.

One row, multicolumn:

<table border=”1″>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr>
</table>

If you need to have four columns, just add another <td>. The number of <td> lines would correspond to the number of columns you have in your table

This will show up as:

column 1

column 2

column 3

Now for something a little more challenging, why not try to have a table with two rows and three columns?

<table border=”1″>
<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>

As you can see, there are two different sets for <tr>, which would mean that the table would have two rows. Three <td> tags for each <tr> set would mean that each row has three columns.

This code will show as:

Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3

More on the Border Attribute

We have already explained that the border attribute would display the gridlines or border of your table. If you do not want borders for your table, you can just omit the border attribute or set its value to zero. Conversely, if you want a thicker border on your table, you can put in a higher value for your border attribute, i.e.,

<table border=”10″>
HTML Table Headers

If you need to include headers in your table, you would need to use the <th> tag instead of the <td> tag in your first <tr> set.

For example, to create the following table:

Header 1	Header 2	Header 3
Row 1, Column 1	Row 1, Column 2	Row 1, Column 3

You would need to write the following HTML code:

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
</table>

Captioning a Table

A caption could be your table’s title or short description. You can add this at the top or the bottom of your table, but within your <table> tags.

To add a caption, use this syntax:

<caption>Title of Your Table</caption>

Working with cells that take up two rows or two columns

There are times when you need to have headers or cells that spans two or more rows or columns. You can accomplish this using colspan or rowspan.

For example, to create this type of table:

Category	Examples
Fruits	Apples	Oranges	Grapes

You would write this HTML code:

<table border=”1″>
<tr>
<th>Category</th>
<th colspan=”3″>Examples</th>
</tr>
<tr>
<td>Fruits</td>
<td>Apples</td>
<td>Oranges</td>
<td>Grapes</td>
</tr>
</table>

Take note that your second header, has the attribute colspan.

Conversely, writing this code:

<table border=”1″>
<tr>
<th>Department:</th>
<td>Accounting</td>
</tr>
<tr>
<th rowspan=”2″>Contact Person:</th>
<td>Freya Olsen</td>
</tr>
<tr>
<td>Maita Cot</td>
</tr>
</table>

would allow you to have a cell that spans two rows. Notice that the header for Contact Person has the attribute rowspan.

Department:	Accounting
Contact Person:	Freya Olsen
	Maita Cot

Making Data Easier to Read

Sometimes, when you work with blocks of data, it is difficult to read it because it is displayed too close to the border. This is where the attribute “cellpadding” comes in handy.

<table border=”1″
cellpadding=”10″>
<tr>
<td>This cell is padded. </td>
<td>This cell is padded too. </td>
</tr>
<tr>
<td>The world is round.</td>
<td>The sky is grey.</td>
</tr>
</table>

The resulting table will have your text with sufficient white space around it.

Instead of looking like this:

HTML Tables Are Very Flexible

As you can see, HTML tables are very flexible. Aside from allowing you to have exactly the cells, rows and columns that you need, you can also put in any data you want. For example, you could have words, paragraphs, bulleted lists and even another table within a table.