You are here --> [HTML Tables - Far From Picnic Tables] --> Jump To Article


HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.


TABLE OF CONTENTS
***************************************************************************************
    --> Getting Started with HTML - First Things First
    --> Ground Zero - Where Do I Begin?
    --> HTML Tags - It's All About Tags
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> [HTML Tables - Far From Picnic Tables]
    --> Displaying Images - Adding Life to Your Pages
    --> HTML Forms - Forming What?
    --> Image Mapping and Editing - Importance of Being Unique
    --> Frames - Structuring Static Document Layout

***************************************************************************************


HTML Tables - Far From Picnic Tables

In the everyday world, a table is commonly used to present tabular information such as schedules, statistics, etc. In the world of HTML, a table is also used for these purposes, but it is more commonly used for organizing the content of complex web pages. Many web designers prefer to create on overall web site layout through the use of a single table. A table lets web designers make use of rows and columns so they can specify precisely where text, images, and objects are to be placed within their documents. This is what makes the <table> element one of the most powerful and versatile out of all HTML tags. The following information gives an overview of the table elements and attributes when using the <table> tag:

Table Elements and Corresponding Attributes
-----------------------------------------------------------------

<table></table> --> Tag used to define a table.
*** Table Attributes ***
align="" - [ left, center, right ] - specifies the horizontal alignment of the table.
border="#" - specifies the thickness of the table border in pixels represented by #. 0 = no border; 1 = default; the higher the number, the thicker the border.
cellpadding="#" - specifies the thickness of the area inside the contents of a cell in pixels represented by #; the higher the number, the thicker the area.
cellspacing="#" - specifies the thickness of the area outside the contents of a cell in pixels represented by #; the higher the number, the thicker the area.
width="#" - specifies the width of the table in pixels represented by #. Use pixel values such as width="500" or use percentage values such as width="100%". Percentages are based on the screen resolution of the visitor's display.
bgcolor="#hexValue" - specifies the color of the background of the table; must use hexadecimal HTML color values as usual.
background="imageURL" - specifies an image to be used as the background of the table; image must be present in current directory as usual unless full path of image is provided.

The following tags must be placed within the <table> tag in order for them to be associated with the table.

<caption></caption>
Defines a title to be used for the table positioned above the table, by default. Use the attribute align="bottom" to place the caption below the table.

<tr></tr>
Defines a table row within the table.
*** Attributes ***
align="" - [ left, center, right ] - specifies the horizontal alignment of the contents of a cell.
valign="" - [ top, middle, bottom ] - specifies the vertical alignment of the contents of a cell.
bgcolor="#hexValue" - specifies the color of the background of the cell; must use hexadecimal HTML color values as usual.
background="imageURL" - specifies an image to be used as the background of the cell.

<th></th>
Defines a table header cell. By default, the text is centered and is of bold type.
*** Attributes ***
align="" - [ left, center, right ] - specifies the horizontal alignment of the contents of a cell.
valign="" - [ top, middle, bottom ] - specifies the vertical alignment of the contents of a cell.
colspan="#" - specifies the number of columns a cell will expand represented by #.
rowspan="#" - specifies the number of rows a cell will expand represented by #.
nowrap - eliminates word wrapping in a cell.
width="#" - specifies the width of the cell. (pixel or percentage values) represented by #.
height="#" - specifies the height of the cell. (pixel of percentage values) represented by #.
bgcolor="#hexValue" - specifies the color of the background of the cell; must use hexadecimal HTML color values as usual.
background="imageURL" - specifies an image to be used as the background of the cell.

<td></td>
Defines a table data cell within the table row. NOTE: a data cell must be placed inside a table row.
*** Attributes ***
align="" - [ left, center, right ] - specifies the horizontal alignment of the contents of a cell.
valign="" - [ top, middle, bottom ] - specifies the vertical alignment of the contents of a cell.
colspan="#" - specifies the number of columns a cell will expand represented by #.
rowspan="#" - specifies the number of rows a cell will expand represented by #.
nowrap - eliminates word wrapping in a cell.
width="#" - specifies the width of the cell. (pixel or percentage values) represented by #.
height="#" - specifies the height of the cell. (pixel of percentage values) represented by #.
bgcolor="#hexValue" - specifies the color of the background of the cell; must use hexadecimal HTML color values as usual.
background="imageURL" - specifies an image to be used as the background of the cell.

The following are examples illustrating how tables can be used to provide structure to web documents. Tabular structure, complex web page structure, border tricks, and complex web page structure with a navigational menu are emphasized.

Table Example 1: (simple table display for tabular information)

<html>
<head><title></title></head>
<body>

<table border="1" width="300">
<caption><font size="2pt" face="arial">Example Table</caption>
<tr>
<th bgcolor="#000000"><font size="2pt" face="arial" color="#FFFFFF">Heading</font></th>
<th bgcolor="#000000"><font size="2pt" face="arial" color="#FFFFFF">Heading</font></th>
</tr>
<tr>
<td align="left"><font size="2pt" face="arial">Text A</font></td>
<td align="right"><font size="2pt" face="arial">Text B</font></td>
</tr>
<tr>
<td align="center"><font size="2pt" face="arial">Text C</font></td>
<td align="center"><font size="2pt" face="arial">Text D</font></td>
</tr<
<tr>
<td align="left"><font size="2pt" face="arial">Text E</font></td>
<td align="right"><font size="2pt" face="arial">Text F</font></td>
</tr>
<td align="center" colspan="2"><font size="2pt" face="arial">Text G</font></td>
</tr>
</table>

</body>
</html>

The above HTML code would produce the following results in a web browser:

Example Table
Heading Heading
Text A Text B
Text C Text D
Text E Text F
Text G


Table Example 2: (complex web page for entire web page layout)

<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td width="25%" bgcolor="#114E86" align="left" valign="middle">
<font size="2pt" face="arial" color="#FFFFFF">This text corresponds to the left content panel of the overall layout of the web page document.</font>
</td>
<td width="50%" bgcolor="#FFFFFF" align="center" height="300" valign="top">
<font size="2pt" face="arial">This text corresponds to the center content panel of the overall layout of the web page document.</font>
</td>
<td width="25%" bgcolor="#E8E8E8" align="right" valign="bottom">
<font size="2pt" face="arial" color="#114E86">This text corresponds to the right content panel of the overall layout of the web page document.</font>
</td>
</tr>
</table>

The above HTML code segment would produce the following results in a web browser:

This text corresponds to the left content panel of the overall layout of the web page document. This text corresponds to the center content panel of the overall layout of the web page document.











 This text corresponds to the right content panel of the overall layout of the web page document.


Table Example 3: (border tricks)

<table cellpadding="1" cellspacing="0" width="250" border="0" bgcolor="#C0C0C0"><tr><td>
<table cellpadding="2" cellspacing="0" width="100%" border="0" bgcolor="#FFFFFF"><tr><td>
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#114E86"><tr><td>
<table cellpadding="2" cellspacing="0" width="100%" border="0" bgcolor="#FFFFFF"><tr><td>
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#114E86"><tr><td>
<table cellpadding="2" cellspacing="0" width="100%" border="0" bgcolor="#C0C0C0"><tr><td height="100" align="center" valign="middle">
<b>Text Here</b>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>

The above HTML code segment would produce the following results in a web browser:

Text Here


Table Example 4: (complex web page using a navigational left pane vertical bar)

<center>
<table cellpadding="1" cellspacing="0" border="0" bgcolor="#000000" width="85%"><tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<!-- begin left pane of content area -->
<td width="15%" align="center" valign="top" bgcolor="#C0C0C0" height="350">
<br><br>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td align="center"><font size="2pt" face="arial"><b>--></b> <a href="/">Nav Link 1</a></td></tr>
<tr><td align="center"><font size="2pt" face="arial"><b>--></b> <a href="/">Nav Link 2</a></td></tr>
<tr><td align="center"><font size="2pt" face="arial"><b>--></b> <a href="/">Nav Link 3</a></td></tr>
<tr><td align="center"><font size="2pt" face="arial"><b>--></b> <a href="/">Nav Link 4</a></td></tr>
<tr><td align="center"><font size="2pt" face="arial"><b>--></b> <a href="/">Nav Link 5</a></td></tr>
</table>
</td>
<!-- end left pane of content area -->

<!-- begin right pane of content area -->
<td width="85%" align="center" valign="top" bgcolor="#FFFFFF">
<br><font size="2pt" face="arial" color="#0000FF"><h3><b>Welcome, to my web page!</b></h3></font>
</td>
<!-- end right pane of content area -->

</tr>
</table>
</td></tr>
</table>
</center>

The above HTML code segment would produce the following results in a web browser:



--> Nav Link 1
--> Nav Link 2
--> Nav Link 3
--> Nav Link 4
--> Nav Link 5

Welcome, to my web page!


Tables are associated with developing structural table formats within a web document. Because tables can be created using pixel dimensions or percentage values, they can play a crucial role in organizing web document content and creating complex web page layouts. The table tag is one of the most convenient and popular HTML element because of its powerful and flexible capabilities.

The next section will show you how to add images to your site. Text is informative and almost always necessary, but images add life and personality to websites. Read on for more about displaying images...

Move on to next topic: Displaying Images - Adding Life to Your Pages

Back to Top