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.
 

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.
  

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.
 

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)

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.

 top of page

Samples

  
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.
 

  
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.
  

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%.

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

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.

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).

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?
 

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.

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

 
*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.