HTML Tutorial

Some Background
The Basic Page
Document Structure
Adding Headings
Formatting Text
Adding Images
Adding Links
Lists
Tables
Data Tables
CSS

Webmaster Resources

Selecting a Host
Authoring Software
Making Money
Other Software
Scripts

Resources for Surfing

Anonymous Surfing
Download Managers
Downlaod Accelerators
Cache and Cookie Managers
Opera the Best Browser

HTML Tutorial - Tables HTML Tutorial - Basic Page

A Simple Table

But I don't need tables unless I have tabular data to display? You do need tables- almost all webpages use them. Most pages need tables although you don't see them as they have no borders. Unlike word-processing we don't have columns or text boxes in HTML, although CSS layers are now becoming more common. So, most layout other than a boring text page requires tables for page layout. They can get quite complicated with tables inside the cells of other tables, for complex layout. You can see the single cell tables in the page below. Click here to see the tables which are used to layout this page.

<table>

</table>

<table> Opens the table

<tr> </tr> contain the cells for each row. So we have two rows in the example.

<td> </td> define the cells in each row. So we have three cells (columns) in each row on the left. Your cell contents go between the <td> and </td> tags. Here there are no contents, but if I place empty cells in a table they will collapse to almost nothing. So, I place a space into each cell. You already learned that spaces are ignored except one between each word, so we need a special method. We insert an escape character for the space  . It is common practice to fill all empty cells in a table in this way.

You will notice how the code is laid out. Each row is indented and each cell further indented. This will make it easier to locate rows because we can see the matched pair of tags more readily.

COMMON TABLE ATTRIBUTES

Bgcolor/background - Used as in the <body> tag; if you do not use a background image or colour the table will be transparent showing the main page background.

Align - This defines the horizontal position of the table Left and Right are also allowed

Width - you may specify the absolute size in pixels but make sure that it is not wider than the users screen about 800 is common. You may also define it as a percentage of the width of the window, so it will shrink when the window is shrunk. Note the table can be greater than 100% although this is not desirable.

Border - n refers to the number of pixels to define the width of the border-use zero for no borders.

Cellpadding - This is equivalent to the internal margins of each cell - again specified in pixels.

Cellspacing - This defines a space in pixels between each cell.

Note the tags below have been wrapped by your browser. My layout of the tags has no carriage returns.

</table>

</table>

Controlling The Look of Each Cell

Each cell can have its own background or background image in the same way as we have seen before. This demonstrated in the first row.

In the second row we have used the align attribute. Here it works in a different way as it aligns the contents of the cell. Left, right and center are valid as before.

Valign aligns the contents of the cell vertically so top, middle and bottom are valid.

Width attribute can be used to control the width of each cell. It will only be needed in one row since all cells in the column must be the same width. It is common to to leave one column without a width so it can expand and contract whilst the others are fixed width="*" tells the browser to allocate the remaining space to that cell.

You cannot control the border, cellpadding or cellspacing of individual cells although it will work with some versions of IE.

Writing the Code

Writing the code for tables is considered to be fairly straight forward but time consuming. In fact with the right approach it is not as time consuming as it appears. The technique is to define the overall table attributes, then define the first row and copy it as many times as needed to create the following rows. Then add your content to the cells. Note that cells expand to fit the content.

Columns and Merging Cells

The column widths must be the same size across all rows, but it is possible to achieve the equivalent of merging cells. The cell height is not usually defined. The browser will simply adjust the height of any row so that it is high enough to accommodate the contents of the cell containing the greatest amount of data.

You should also note that cells expand in width to accommodate wide objects such as images, regardless of any cell width specified in your <td> tags.

Next lesson looks at merging cells.

Counter