www.dtp-aus.com

< back

Using TABLES - HTML 3.2 Table <Tags>
 
Ever wonder how professionals manage to place text and images anywhere on Web pages. How can it be done with basic object 'align=right' and align=left' attributes etc? Well, it cannot! Hidden tables are the secret behind those pages. Study the detailed tags below, practice, and learn how. There are samples at the bottom of this page.

tables

But first!
In the listing below, the table tag attributes are listed separately allowing clear tutorial descriptions for each. However, multiple attributes should always be included in the one tag.

Although the tags are shown in upper case, it is suggested that lowercase be used for all HTML code, ensuring file/path name compatibility with all servers. Many servers are case sensitive or do not accept special characters and spaces.

General HTML 3.2 tags, Frames, Forms and Image Maps all have their own tutorials on this site. After completing this page, follow the back button above.

Comments or suggestions are welcome; contact me via e-mail at webmaster@dtp-aus.com.
 

TABLE TAGS and Attributes

Amongst these tags are browser specific extensions. Use these with caution. Primarily, but not only, Netscapes "jumping the gun" by the early use of HTML 3.0 proposals has always created problems for web page designers. There is no ratified HTML 3.0, and that proposal was altered AND then ratified by the W3C as HTML 3.2.

Considerations for the most recent browsers should be ignored unless you are willing to confine efficient viewing to only a portion of visitors to your site! 'Toys' are one thing, but efficient information transfer should be your prime concern for some time yet.
  

<TABLE> </TABLE>
The Table Tag
Characteristics applicable to an entire table are included within the table tag. The table tags must include a closing pair </table>, and all row definitions and data cells must be enclosed by the table pair. Characteristics include: border or no border; border width; cell padding size; cell spacing size; table width. Some recent browsers will also accept table background colours and images, plus table height values. Those attributes are not conventional HTML 3.2 attributes and should be used cautiously - a lot of people will not see these MS and Netscape extensions.

Large tables that would make a page very long should be broken into separate tables. When loading tables, a Browser will wait until all objects in each table are received from the server before displaying them. Therefore, give the viewer something to look at rather than a blank Browser window. Just waiting on the telephone lines can be a big enough problem.
 

<TABLE BORDER> </TABLE>
Defining a Table Border without a border size.
Foo Bar and Waffle

Using the Border attribute without parameters will display a default border with a width of "1".
ie <table border>. (The <table> ... </table> tag pair without attributes will not show any border at all. The following attributes and characteristics will not default either)

<TABLE BORDER=??> </TABLE> (pixels)
<table border=0>
0 0
0 0
<table border=1>
1 1
1 1
<table border=5>
5 5
5 5
<TABLE CELLSPACING=?> </TABLE> (pixels)
<table cellspacing=0>
0 0
0 0
<table cellspacing=1>
1 1
1 1
<table cellspacing=4>
8 8
8 8
Cellspacing refers to the width between border lines.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE CELLPADDING=?> </TABLE> (pixels)
<table cellpadding=0>
0 0
0 0
<table cellpadding=3>
3 3
3 3
<table cellpadding=9>
9 9
9 9
Cellpadding refers to the minimum space between objects and the inner table border.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE WIDTH=?> </TABLE> (in pixels)
<table width=50>
* *
* *
<table width=75
* *
* *
<table width=100>
* *
* *
The width of these tables have each been set to a fixed number of screen pixels.
<TABLE WIDTH=%> </TABLE> (percentage of ??)
<table width=25%>
* *
* *
<table width=45%>
* *
* *
<table width=90%>
* *
* *
Each of these tables are inside table cells of the fixed width hidden table used for this listing. Therefore the percentages refer to the width of the hidden cells. The width could represent a full browser window, and the tables would change in size if the browser window changed. see samples at the bottom of this page
<TR> </TR>
Table Rows <tr> enclose the Table Data Cells <td>. TR tags must be a pair. <tr>...</tr>
<table><tr><td>......</td>
<td>......</td></tr></table>
To have a data cell you must first have a Table, a Row <tr> and then the data cells(s) <td>. In other words, all data cells must be contained within Table Rows (see TD below). It is the often complex combination of table rows and data cells within the rows, that enables specific placement of objects other than by the very basic left, right and center object attributes.
<TD> </TD> (must appear within table rows)
Table Data cells contain the objects placed in a table. Table Data cells <td> must be enclosed by Table Row tags <tr>. TD tags must be a pair. <td>...</td>
<table><tr><td>......</td>
<td>......</td></tr></table>
Objects contained in data cells can be text, bitmap images or any other object that can be placed into a Web page (ie Java Applets, Forms, embedded sound devices / objects etc)
<TD ALIGN=left|right|center> </TD>
Alignment controls the justification of objects in a data cell.
<td align=left>
Foo Bar
</td>
<td align=center>
Foo Bar
</td>
<td align=right>
Foo Bar
</td>
The alignment attributes listed in the heading should be self explanatory.
<TD VALIGN=top|middle|bottom> </TD>
Vertical Alignment controls the position of objects in a data cell.
<td valign=top>
...</td>
<td valign=center>
...</td>
<td valign=bottom>
...</td>
just
some
fill
text
The vertical alignment attributes listed in the heading should be self explanatory.
<TD NOWRAP> </TD>
Nowrap means no line breaks in text objects.
Foo Bar and waffle! Foo Bar and waffle etc!

<td nowrap>...</td>

Here the table has been forced to a minimum size of 100 pixels, although it can not reduce to this size because the right hand cell is set with the <td nowrap>...</td> attribute. The text in the left hand cell has wrapped because its width is minimised by the force of the text in the "nowrap" cell.

Nowrap simply means don't wrap the text to multi lines even if the width (cell, table, page etc.) happens to be smaller. Consider the ramifications of using this attribute if you design at high resolution when many surfers will view your page with low resolution video monitors. They may have to scroll sideways to read each line and will probably go elsewhere very quickly.

<TD COLSPAN=?> </TD>
Make one data cell wider than others above and/or below. (spans multiple columns)
Table Data 1 Table Data 2
<tr>
<td>Table Data 1</td>
<td>Table Data 2</td>
</tr><tr>
<td colspan=2>This cell</td>
</tr>
The top row contains two data cells. To force the bottom single data cell to the width of the top two (and the width of the table in this case), the colspan= attribute is used. Note this order of TRs and TDs. Each data cell in a table (horizontally) represents a column.
<TD ROWSPAN=?> </TD>
Make one column cell higher than others next to it. (spans multiple rows)
Table Data 1 <tr>
<td>Table Data 1</td>
<td rowspan=2>This cell</td>
</tr><tr>
<td>Table Data 2</td>
</tr>
Table Data 2
The left hand column contains two data cells compared to the single data cell in the right hand column. Note this order of TRs and TDs. The higher data cell is described in the first row, similar to the "colspan" sample above. But the rowspan attribute creates a very different result.
<TD WIDTH=?> </TD> (in pixels)
Set the width of individual Table Cells in pixels.
75 15 40
" " "
Each data cell <td> tag includes a width=??? attribute. (a minimum width in screen pixels)
<TD WIDTH="??%"> </TD> (percentage of table)
Equal Table Data cells.
33 33 33
%
Uneven cells
15 35 50
% %
Uneven cells
20 20 60
% %
Each of these tables are inside table cells of the fixed width hidden table used for this listing, and each table has been set to 70% of the hidden cell width. The percentages displayed in each cell refer to the width of the table the cell is in. Therefore, if each table was on a page, and not in hidden cells as they are here, these table cells would change in width if the browser window and the table changed in width. see samples at the bottom of this page
<TD BGCOLOR="#rrggbb"> </TD>
Setting the background colour of individual Table Data cells
#999900 #FF9900 #996699
This attribute is a recent NS & MSIE extension, not standard HTML 3.2. Use it cautiously.
ie a dark colour with light text will hide your text in many Browsers
<TH> </TH> (same as TD, except text is bold)
Table Header cell.
Table Header cell Table Data cell
<tr>
<th align="center" width="50%">Table Header cell</th>
<td align="center" width="50%">Table Data cell</td>
</tr>
<tr>
<td colspan="2" align="center">This is this cell</td>
</tr>
The TH tag can be used in place of the TD tag. All attributes are the same as for <td>, except all text objects are forced to bold. Not used very often.
<TH ALIGN=left|right|center> </TH>
Default Bold text, otherwise refer to the <TD ALIGN= attributes.
<TH VALIGN=top|middle|bottom> </TH>
Default Bold text, otherwise refer to the <TD VALIGN= attributes.
<TH NOWRAP> </TH>
Default Bold text, otherwise refer to the <TD NOWRAP= attributes.
<TH COLSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD COLSPAN= attributes.
<TH ROWSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD ROWSPAN= attributes.
<TH WIDTH=?> </TH> (in pixels)
Default Bold text, otherwise refer to the <TD WIDTH= attributes.
<TH WIDTH="%"> </TH> (percentage of table)
Default Bold text, otherwise refer to the <TD WIDTH= % attributes.
<TH BGCOLOR="#rrggbb"> </TH>
Default Bold text, otherwise refer to the <TD BGCOLOR= attributes. an extention.
<CAPTION> </CAPTION> (above or below table)
A Table Caption appears without table borders.
<table><caption>Foo Bar</caption>...
Table Data cell Table Data cell
Table Data cell - colspan=2
This table tag and its attributes are used to place captions at the top or bottom of tables.
<CAPTION ALIGN=top|bottom> </CAPTION>
Table Captions can be placed at the top or bottom of a table.
<table><caption align=top>Foo Bar</caption>....
Table Data cell Table Data cell
Table Data cell - colspan=2

Table Data cell Table Data cell
Table Data cell - colspan=2
....<caption align=bottom>Foo Bar</caption></table>

 top of page

Samples

Table Width (%) and Cell Width (pixels) example

Table size is set to 75% of the page width
This table will expand and contract in width as the Browser Window width is changed. Watch the actions of the bottom three cells as you change the width of your Browser.
This Table Data cell has been set to a fixed minimum of 120 screen pixels. The size of this cell has not been set to anything at all. The size of this cell has not been set to anything at all.

Table Data Cell Width (%) example

Table size is set to 75% of the page width
This table will expand and contract in width as the Browser Window width is changed. Watch the actions of the bottom three cells as you change the width of your Browser.
This Table Data cell has been set to 25% of the Table Width This Table Data cell has been set to 40% of the Table Width This Table Data cell has been set to 35% of the Table Width

Table Data cell Width (%) and Nowrap example

Table size is set to 75% of the page width
This table will expand and contract in width as the Browser Window width is changed. Watch the actions of the bottom three cells as you change the width of your Browser.
This Table Data cell has been set to 30% of the Table Width This Table Data cell has been set to
40% of the Table Width, and
includes the nowrap attribute also
This Table Data cell has been set to 30% of the Table Width

Table Width (%) and Cell Width (pixels) example

Table size is set to 100% of the page width

This table will expand and contract in width as the Browser Window width is changed. Watch the actions of the four cells below as you change the width of your Browser. Table Width=100%, align=left.

a button
a button
button width =
76 pixels

This Table Data cell width has been fixed to 90 pixels minimum

These cells widths have been set to 50%, forcing the left hand cell to its minimum in Netscape. These cells widths have been set to 50%, forcing the left hand cell to its minimum in Netscape.
This method can be used with invisible tables (border=0) to keep the left hand column at a set width.

By using a Page Background Image with a left hand panel slightly wider than the column, designers make it appear as though the buttons etc are centred on and part of the panel portion of that background.

I used this method on another page so that it could be viewed as an example.
Remember to use your Back Arrow to return to this page. View the example of an invisible table.

Now view the same page, but with the table borders visible showing the column that keeps the buttons over a background panel. View the example with borders.

top of page

A Complex Table

1 2 3 4
5 6
7 8 9
10

The CODE for the Complex Table

Note that all widths are entered without the ??% sign. This directive
forces the use of Pixels as a size reference (static sizes that do not change).

<center>
<table border="2" cellpadding="2" cellspacing="3" width="565">
Row 1 <tr>
    <td valign="middle" align="center" width="94" rowspan="4">1</td>
    <td valign="middle" align="center" width="282" colspan="3">2</td>
    <td valign="middle" align="center" width="94" rowspan="4">3</td>
    <td valign="middle" align="center" width="95" rowspan="2">4</td>
</tr>
Row 2 <tr>
    <td valign="middle" align="center" width="94" rowspan="2">5</td>
    <td valign="middle" align="center" width="188" colspan="2">6</td>
</tr>
Row 3 <tr>
    <td valign="middle" align="center" width="94">7</td>
    <td valign="middle" align="center" width="94">8</td>
    <td valign="middle" align="center" width="95" rowspan="2">9</td>
</tr>
Row 4 <tr>
    <td valign="middle" align="center" width="282" colspan="3">10</td>
</tr>
</table>
</center>

  
Note
: Cells 1, 2, 3 and 4 all start at the top of Row 1. Cells 5 and 6 start at the top of Row 2 etc. Follow these steps between the Table and Code above to understand the order that must be followed. You will see that the order is set by rows, top to bottom. Table Data cells are ordered left to right, within each row, only if they start in that row (the cell top). Their height is irrelevant as to which row they are listed in, but is relevant to the rows they are not listed in if they span multiple rows.

Also, although it will adjust the cell heights to take them (and others with them) any HTML page objects can be placed in each cell - even another table. Practice in a simple text file with the .html extension and view your changes in a Browser as you go. Trial and error will teach you Tables methods very quickly. Do not be afraid of them! The layout control is worth it.

The "width=" attribute is not mandatory. But if you do include data cell widths, as a percentage or in pixels, make sure that the total across a row equals the table "width=" value. Percentage and Pixel values can be mixed, but also make sure you test the results with Netscape 3+ AND I. Explorer 3+. Netscape can do strange things to tables and seems happier with percentages than it does with fixed pixel widths, whereas I. Explorer is more forgiving. This is very evident as one surfs the web viewing pages that are not tested for good interoperability. Remember that HTML 2.0 does not include table controls, and the many people still using HTML 2.0 browsers see only a mess on their screens, compared to the way you design pages with tables. If it is just important text information you need to display, then avoid tables.

I have almost exclusively used table widths of 580 to 595 pixels throughout this site. When using static width tables, I recommend a maximum table width of 600 pixels because this ensures that the large number of viewers still using 640 X 480 resolution video will see your page fit comfortably within their screen area, including scrollbars etc.

Below I have placed objects into a couple of the cells so you can see how the Table will automatically adjust row heights to cope. There are innumerable variations that you will encounter as objects are included, too many to list. Just remember the Table, TR and TD tags, plus the alignment attributes, and combine / adjust them to achieve the results you desire. Even sketch your layout on paper before starting. You will be surprised how easy it can be when pre-planned - as many pros do, and just follow the rows. That's right! - Practice.
 

1 The moggy! 3 4
5 6
This is a bit of text that will stretch a cell (and others). 8 9
10

  
Tables within tables

Last but not least, here is the same table containing two other tables. Often it is much easier to use this method rather that spend too much effort and typing trying to create even more complex layouts - also for complex layouts or effects (like different borders) that cannot be achieved when using just one table. "Cellspacing" is reduced to highlight the additional tables.
  

1 2
The quick brown fox jumped... ..ahh who cares?
4
A B
C
6
7 8 9
10
  
<center>
<table border="1" cellpadding="2" cellspacing="0" width="565">
Row 1 <tr>
    <td valign="middle" align="center" width="94" rowspan="4">
1</td>
    <td valign="middle" align="center" width="282" colspan="3">
2</td>
    <td valign="middle" align="center" width="94" rowspan="4">

<table border="4" cellpadding="3" cellspacing="1" width="100%">
<tr>
    <td valign="middle" align="center">The quick brown fox jumped... ...<em>ahh
    who cares
</em>?</td>
</tr>
</table>
    </td>
    <td valign="middle" align="center" width="95" rowspan="2">
4</td>
</tr>
Row 2 <tr>
    <td valign="middle" align="center" width="94" rowspan="2">

<table border="4" cellpadding="3" cellspacing="2" width="100%">
<tr>
    <td align="right">A</td>
    <td align="left">B</td>
<tr>
    <td colspan="2" valign="middle" align="center">C</td>
<tr>
</table>
    </td>
    <td valign="middle" align="center" width="188" colspan="2">
6</td>
</tr>
Row 3 <tr>
    <td valign="middle" align="center" width="94">
7</td>
    <td valign="middle" align="center" width="94">
8</td>
    <td valign="middle" align="center" width="95" rowspan="2">
9</td>
</tr>
Row 4 <tr>
    <td valign="middle" align="center" width="282" colspan="3">
10</td>
</tr>
</table>
</center>
  
Of the two additional tables in the example above, the first visible one is actually listed second in the code - because it is positioned (its top starts) in a lower row.

And now, how do they! create those neat looking mail forms and tables that have a simple outline around them, but not the clunky default borders?

It's Simple! heh heh.

Design your table, add the texts and colour etc making sure each cell has a background colour - even white. When it is finished place the whole lot in another table with a small "cellpadding" value and NO border. Make this outer table width the desired size of the whole, and before placing the original table design in to it, change the original table width to 100%; as follows:

Table 1 - your original required design width 100%.

These products are now available
Bills Widgets - all sizes $49.65
Transwhatsit Auto Symbolspacials $176.34
These prices include W/S Tax and Surface Mail costs within Transelvania

Create the master table - with a small "cellpadding" value (I have used "2").

ORDERING
 

I have included two rows in the master table allowing for the heading cell - "ORDERING".

Now, in the <td> </td> cell area of the second cell in the master table, I just cut and paste the code of the first table.

ORDERING
These products are now available
Bills Widgets - all sizes $49.65
Transwhatsit Auto Symbolspacials $176.34
These prices include W/S Tax and Surface Mail costs within Transelvania

And IF you want fine lines to appear between each cell, change the "cellspacing="0"" value of the original table (not the new master) to a small value (I have used "1" in the next example).

ORDERING
These products are now available
Bills Widgets - all sizes $49.65
Transwhatsit Auto Symbolspacials $176.34
These prices include W/S Tax and Surface Mail costs within Transelvania

And there you have it. Don't go for this fancy stuff until you have a pretty good grasp of tables in general. Then follow the simple steps shown here if you want to add the neat borders.


 
Lastly, adding colour to a "td" cell, "tr" row, or even for later browsers the "table" tag itself is easy and now understood.

But what about adding a background image so we can place a bit of text over it as opposed to only being able to insert an image in to a cell and nothing else?
 

Hello! See. It can be done. Here is some meaningless 'fill this space' blurb.
And here is some more in a cell spanning both above cells.

NOTE: Image "backgrounds" used as follows are ALSO "TILED" to fill the designated area just the same as general page backgrounds are tiled by the browser. See my tute on background images for tips and extended knowledge.

This shows the above table WITH borders, followed by its html code.

Hello! See. It can be done. Here is some meaningless 'fill this space' blurb.
And here is some more in a cell spanning 2 cells.
<table width="75%" border="1" cellspacing="0" cellpadding="5" background="bg/paper3.jpg">
<tr>
<td width="30%"><b><font size="5" color="#FF0000">Hello!</font></b></td>
<td width="70%">See. It can be done. Here is some meaningless 'fill this space' blurb.</td>
</tr>
<tr align="center">
<td colspan="2"><b>And here is some more in a cell spanning 2 cells</b>.</td>
</tr>
</table>

NOTE: the image URL is "relative". Many prefer to always use "full" URLs.

Careful using "<tr> tags for background images. Some browsers may not display them at all, OR, not display them if we place another table in a cell of the first; the first holding the bg image.
Hello! See. It can be done. Here is some meaningless 'fill this space' blurb.

image and text over "td" background over table background!!
Annnd, yet.. ..another 2 cells
<table width="75%" border="1" cellspacing="0" cellpadding="5" background="bg/paper3.jpg">
<tr>
<td width="30%"><b><font size="5" color="#FF0000">Hello!</font></b></td>
<td width="70%">See. It can be done. Here is some meaningless 'fill this space' blurb.</td>
</tr>
<tr align="center" background="bg/bg92.gif">
<td colspan="2"><img src="bg/foos.gif" width="303" height="13"><br>
image and text <u>over</u> &quot;td&quot; background <u>over</u> table background!!</td>
</tr>
<tr align="center">
<td>Annnd, yet.. </td>
<td>..another 2 cells</td>
</tr>
</table>
Hello! See. It can be done. Here is some meaningless 'fill this space' blurb.

image/text IN "td" of SECOND TABLE IN cell of the first table with a background image!!
Annnd, yet.. ..another 2 cells
<table width="75%" border="1" cellspacing="0" cellpadding="5" background="bg/paper3.jpg">
<tr>
<td width="30%"><b><font size="5" color="#FF0000">Hello!</font></b></td>
<td width="70%">See. It can be done. Here is some meaningless 'fill this space' blurb.</td>
</tr>
<tr align="center">
<td colspan="2">
<table width="80%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center" background="bg/stripes.gif"><img src="bg/foos.gif" width="303" height="13"><br>
image/text <u>IN</u> &quot;td&quot; of SECOND TABLE <u>IN</u> cell of the first table with a background image!!</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>Annnd, yet.. </td>
<td>..another 2 cells</td>
</tr>
</table>
So there you have it. Lone tables or more commonly nested tables are what allow most of the layout control one sees on web sites, including variations of background imaging in confined areas.

 
*More recently (2005 onwards) we find many professionally? built web pages using nothing but "DHTML" (dynamic html) and/or "CSS" (cascading style sheets) to layout pages. VERY complex, DO NOT be concerned that probably you do not understand them as yet or have trouble learning (if you ever want to!)...

*1) Because of the complexity compared to basic HTML, DHTML/CSS requires an expensive WYSIWYG html editor to produce web pages. Not only would one need an excellent technical memory but the extra manual typing of code is no fun at all.
*2) There are 70-80 basic html tags most of which are fairly easy to remember for GOOD general page design. DHTML and CSS methods include many hundreds of extensions and 4 or 5 or more times additional attributes!!
*3) Even to this day all browsers DO NOT display DHTML/CSS the same. Because of that and the fact that designing for cross browser compatibility requires A LOT of extra hard work, depending on which browser and/or operating system we use we find MANY web pages BROKEN by these advanced (so called) methods.
*4) A large amount of DHTML stuff ALSO requires Javascript to enable dynamic control. Even more so these days, for SECURITY, people surf the web with browser javascript controls disabled. So reliability cannot be taken for granted. Cross-browser javascript compatibility itself also remains a BIG problem.


top of page


Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
Tutorial Text Search Perl CGI Scripts Typography & Layout
4 pages of Links Visitors Book Perl Scripts Forum n/a
Free Links page Feedback Form Q/A contact Forum

pages Designed & Published - Ron F Woolley
e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04