© www.dtp-aus.com
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. But first! 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.
Using the Border attribute without parameters will display a default
border with a width of "1". |
||||||||||||||||||||
<TABLE BORDER=??> </TABLE> (pixels) | ||||||||||||||||||||
<table border=0>
|
<table border=1>
|
<table border=5>
|
||||||||||||||||||
<TABLE CELLSPACING=?> </TABLE> (pixels) | ||||||||||||||||||||
<table cellspacing=0>
|
<table cellspacing=1>
|
<table cellspacing=4>
|
||||||||||||||||||
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>
|
<table cellpadding=3>
|
<table cellpadding=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>
|
||||||||||||||||||||
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>
|
||||||||||||||||||||
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.
|
||||||||||||||||||||
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.
|
||||||||||||||||||||
The vertical alignment attributes listed in the heading should be self explanatory. | ||||||||||||||||||||
<TD NOWRAP> </TD> | ||||||||||||||||||||
Nowrap means no line breaks in text objects.
|
||||||||||||||||||||
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)
|
||||||||||||||||||||
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)
|
||||||||||||||||||||
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.
|
||||||||||||||||||||
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.
|
Uneven cells
|
Uneven cells
|
||||||||||||||||||
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
|
||||||||||||||||||||
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.
|
||||||||||||||||||||
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.
|
||||||||||||||||||||
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.
|
Samples |
Table Width (%) and Cell Width (pixels) example
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
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
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
|
||
![]() ![]() 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. 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. |
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> |
|
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 | ![]() |
3 | 4 | ||
5 | 6 | ||||
This is a bit of text that will stretch a cell (and others). | 8 | 9 | |||
10 |
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 |
|
4 | |||
|
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%.
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. |
|
|||||||
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. |
|||||||
|
|||||||
<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. | |||||||
|
|||||||
<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> "td" background <u>over</u> table background!!</td> </tr> <tr align="center"> <td>Annnd, yet.. </td> <td>..another 2 cells</td> </tr> </table> |
|||||||
|
|||||||
<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> "td" 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> |
|||||||
|
|||||||
*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. |
|||||||
|
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 |
©1997 '98. Last Revised: Friday, 31 October 2003 22:04 |