In this tutorial you are going to learn the different elements / attributes of an HTML table and learn how to manipulate HTML tables in your web page.

Why use an HTML Table?

I would say that 90 – 95% of websites on the internet make use of HTML tables. There has been debates for many years how and what HTML tables are designed for within the website design sector and for what purposes HTML tables should be avoided.

For many years web masters and designers have used tables to help lay out their web page by allocating one cell as the banner and another as the main navigation area and then embedding tables within those cells again to create the banner and navigation structure for that webpage.

This is not technically the correct way of using tables, the ideal way to create page structure within your website would be to use the <div></div> (division) tags and then use CSS to style the different division within the page including elements like float:left; / float:right, margins within the divs, padding, width and height.

However there are many times when tables will be used within your web page for things other than layout and 9/ 10 times this will be to display data to the user on the screen.

There are of course many ways of manipulating these tables within your page to give you the best layout for your data, and we are going to do a few examples below to help you out.

Learning the basics HTML Tables

Example:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Code:

<table border=”1″>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Looks a little confusing doesn’t it? Here is an explaination to the different elements in the table structure above.

<table></table>
Every table will have an opening and closing tag to define the perimeters of the HTML table.

<tr></tr>
Within the table tags you may have 1 or many <tr> tags to determine the number of rows within your table. You need a <tr> </tr> tag for every row you would like in your HTML table structure.

<td></td>
Depending on the number of cells you want to embed within your rows  ou will use the <td></td> tags which stands for ‘table data’.

Setting heights and widths of HTML tables and cells.

To set a table with a certain width you would insert a within the <table width=”xxx”  > within the table like you can see here. The xxx can either be a pixel size of the width ie width=”100″, or is can be a percentage ie width=”90%”.

To set a width within a table to a certain width you use the same command within the <td> tags ie <td width=”100″>. This can be a percentage as well but keep in mind that for this to work properly every data cell within that row needs to be a portion of 100%.

Example:

Cell 1 Cell 2

Code:

<table width=”322″ border=”1″>
<tr>
<td width=”70%”>Cell 1</td>
<td width=”30%”>Cell 2</td>
</tr>
</table>

Notice the width for this table is 322 pixels and the widths of the cells within the tables are 70% and 30%.

HTML Column and row spreads

At times you may be in the situation where you want to join 2 or more cells together and for this technique we use rowspan and colspan respectively depending on whether joing cells vertically or horizontally. See the examples below for a better explaination.

Exmaple:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5

Code:

<table width=”322″ border=”1″>
<tr>
<td width=”100″>Cell 1</td>
<td width=”100″>Cell 2</td>
<td width=”100″>Cell 3</td>
</tr>
<tr>
<td width=”100″>Cell 4</td>
<td colspan=”2″>Cell 5</td>
</tr>
</table>

Notice that the top row in this table has 3 x <td></td> tags and the second row only has 2 x <td></td> tags. In order for the second row to only have 2 table data cells you must tell the browser which which columns the larger cell is going to spread accross. For this we use the colspan=”xxx” attribute within the <td> tag as you can see in the above example. So if you were to spread that same row across all the rows you would need to delete the line above that in the code and change the colspan=”2″ to colspan=”3″.

Cell spacing within HTML table cells

In this section i am going to show you how cell spacing works when you want to serperate out the cells a little. To use cell spacing we use the attribute cellspacing=”xxx” within the <table> tag as you can see the example below.

Example:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Code:

<table width=”322″ border=”1″ cellspacing=”10″>
<tr>
<td width=”100″>Cell 1</td>
<td width=”100″>Cell 2</td>
<td width=”100″>Cell 3</td>
</tr>
<tr>
<td width=”100″>Cell 4</td>
<td width=”100″>Cell 5</td>
<td width=”100″>Cell 6</td>
</tr>
</table>

Table and HTML table data alignment.

When dealing with alignment with tables and table cells there are different kinda that will be handy in different situations. Lets have a look at a few differnt alignments for and within tables.

Standard Left, center and right alignment

If you are looking to align a table to left, center or right of a page, you can either use the align=”xxx” attribute within the <table> tag or use CSS as you can do with all of these examples, how for pure HTML tables you will need to look at the align=”xxx” attribute.

Exmaple:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5

Code:

<table width=”322″ border=”1″ align=”center”>
<tr>
<td width=”100″>Cell 1</td>
<td width=”100″>Cell 2</td>
<td width=”100″>Cell 3</td>
</tr>
<tr>
<td width=”100″>Cell 4</td>
<td colspan=”2″>Cell 5</td>
</tr>
</table>

Horizontal alignment within table data cells

To align data within table data cells you must can again either use CSS and assign styles to a class or for HTML you would need to use the align=”xxx” within the <td> tags of the cells which hold the text you want to align.

Example:

Cell 1 Cell 2

Code:

<table width=”322″ border=”1″>
<tr>
<td width=”60%” align=”center”>Cell 1</td>
<td width=”40%” align=”left”>Cell 2</td>
</tr>
</table>

Vertical alignment of table data

Lets say for example you had a table which is 100 pixels high and you would like to vertically align your table cell contents, be it an image or text itself you can use the valign=”xxx” attribute within the <td> tags to do this for you.

Example:

Cell 1 Cell 2 Cell 3

Code:

<table width=”322″ border=”1″>
<tr>
<td width=”100″ height=”100″ valign=”top” align=”center”>Cell 1</td>
<td width=”100″ height=”100″ align=”center”>Cell 2</td>
<td width=”100″ height=”100″ valign=”bottom” align=”center”>Cell 3</td>
</tr>
</table>

As you can see HTML tables can be manipulated in many ways to get the desired effect within a web page and while i have shown you the different elements i would normally use when dealing wit tables in web page there are many more attributes you can use within your tables to get the effects you want to get.

Here is another great resource for learning about HTML tables and HTML Table structures.