Annabella's HTML Help .... EZ PRINT!

BASIC TABLES

For the full version of this page, go to http://www.annabella.net/tables2.html

INTRODUCTION

Tables can be very simple or quite complicated... it's all up to you!

You may have looked at the source code of pages with tables that have been created by a webpage editor. Some of these look very complicated and are enough to put you off tables altogether!! A hand coded table is a lot simpler to understand, and no where near as daunting!

NOTE: Not ALL browsers interpret tables, and not ALL browsers interpret them in the same way!
I use Internet Explorer 4.0 and Netscape 4.0, and I have mentioned any obvious browser differences as they arise in this tutorial.

FORMAT

Tables begin and end with the <table> and </table> tags. All table information must appear between these tags.

A table can have a visible or invisible border, and can contain captions, header cells, and data cells. These are formed into rows and columns. The data cells can contain text, images, links, and even another table!
A table with no border is a very useful and helpful tool which is often used for page layout purposes. I use lots of borderless tables on my pages.
Each part of a table can have its own set of attributes. It is the attributes that can make table coding look complicated.

TABLE ELEMENTS

<TD> ... a Table Data Cell
The data cell can contain anything! Text, images, links... even another table!
All HTML tags work within your data cell. These are the "body" of your table!

NOTE: You do not have to use the </td> tag unless your table is within another table. It is, however, the correct procedure to use the </td> tag, so all examples in this tutorial will include the closing tags.

<TH> ... A Table Header Cell
Virtually the same as <td>Use the header cell to put a headings in your tables.
It will appear in bold type and the data will be centered.

NOTE: You do not have to use the </th> tag unless your table is within another table. It is, however, the correct procedure to use the </th> tag, so all examples in this tutorial will include the closing tags.<

<TR> ... A Table Row
The <tr> tag designates a row within your table.

NOTE: You do not have to use the </tr> tag unless your table is within another table. It is, however, the correct procedure to use the </tr> tag, so all examples in this tutorial will include the closing tags.

THE BASIC TABLE

<table>
<td>
data goes here
</td>
</table>

This forms a single cell table. It doesn't look like a table because you can't see any borders. That's because you have to tell the table that you want a border.

If we add border=1 within the <table> tag we will get a thin border to our table. The border is expressed in number of pixels,
ranging from 0 to ... well... I'm not sure... but 25 gives you a really w-i-d-e border!

<table border=1>
<td>
data goes here
</td>
</table>

MORE THAN ONE DATA CELL

It's easy to have extra data cells.
You just repeat the <td> data </td> tags as many times as you wish.

<table border=1>
<td> data </td>
<td> data </td>
<td> data </td>
</table>

Vertical dividers appear. They are prompted when you start your new cell. The size of the cell is determined by the size of what you put in it. We will deal with changing your cell size later.

MORE THAN ONE ROW

To create a new row in your table, you use the <tr> and </tr> tags. Then enter each row of data cells, one by one, from left to right.

<table border=1>
<tr>
<td> data </td>
<td> data </td>
<td> data </td>
</tr>
<tr>
<td> data </td>
<td> data </td>
<td> data </td>
</tr>
</table>

Horizontal dividers appear. They are prompted by the <tr> tag.
You can even have a cell with no data in it. The table will still form around it.

ATTRIBUTES

Well... we have made some tables, but they don't look too wonderful! They seem out of balance, the cells are different sizes, and the borders fit very closely to the edges of the data.

One way to improve our tables, is to make use of the table element attributes. You can use lots of different attributes in different combinations.

In all of the following examples, I will only show you the relevant section of code.

TABLE WIDTH & HEIGHT

Up to now, our tables have been as wide as the data stored within them. You can control the width of your table with the width and height attribute. Width and height are expressed as % of the page width, or in pixels.

<table border=1 width=65%>

Similarly, you can make your table higher than the enclosed data.

<table border=1 height=200>

TABLE BORDER

We have discussed border previously, but here is another example.
When you have a wider border, the internal lines remain the same narrow width. Border is expressed in pixels.

A table with no border is a very useful and helpful tool which is often used for page layout purposes. I use lots of borderless tables on my pages.

<table border=5 width=65%>
<table border=25 width=250%>

TABLE CELLPADDING

This creates extra space between the edge of your data and the table borders. Cellpadding is expressed in pixels.

<table border=1 cellpadding=10>

TABLE CELLSPACING

This alters the size of the space between the data cells - the width of the cell walls. Cellspacing is expressed in pixels.

<table border=1 cellpadding=2 cellspacing=10>

HEADER CELLS

TH

As mentioned above, <th> is virtually the same as <td>. It will appear in bold type and the data will be centered. So, lets add some headers to our table.

<table border=5 cellpadding=2 width=60%>
<tr>
<th>Marsupials</th><th>Reptiles</th> <th>Birds</th></tr>
<tr>
<td>Kangaroo</td>
<td>Frill-necked lizard</td>... etc... etc

TD and TH WIDTH

You can set the width of each column of data cells, so that it is no longer determined by the width of the widest data in the cell.
You control the width with the width attribute. It is expressed in % of the table width, or in pixels.

So, let's give our table cells of the same width.

NOTE: You only need to specify the width for each cell in the first row only. Because tables form with their cells in neat columns, the subsequent data cells will take the preset widths of the first row of data cells.

<table border=5 cellpadding=5 width=55%>
<tr>
<th width=33%>Mammals</th>
<th width=33%>Reptiles</th>
<th width=33%>Birds</th>
<tr>... etc... etc... etc

NOTE: If your text is wider than your preset limits, then it will form another line of text within that cell, and will also affect that entire row of cells.