|
HTML Tables - Far From Picnic Tables
In most applications, a table is commonly used to present tabular information such as schedules, statistics, calendars, 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 of all HTML tags. The following gives an overview of the elements and attributes that may be used with the <table> tag:
Table Elements and Corresponding Attributes
-----------------------------------------------------------------
PURPOSE: Used to define a 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 beginning and closing <table> </table> tag in order for them to be associated with the table.
PURPOSE: Defines a title to be used for the table positioned above the first row, by default. Use the attribute align="bottom" to place the caption below the last row.
PURPOSE: 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.
|
PURPOSE: 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.
|
PURPOSE: 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.
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="#114E86"><font size="2pt" face="arial" color="#FFFFFF">Heading 1</font></th>
<th bgcolor="#114E86"><font size="2pt" face="arial" color="#FFFFFF">Heading 2</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 1 |
Heading 2 |
| Text A |
Text B |
| Text C |
Text D |
| Text E |
Text F |
| Text G |
Example 2: (complex web page for entire web page layout)
<table cellpadding="5" cellspacing="0" border="0" width="100%" height="300">
<tr>
<td width="25%" bgcolor="#114E86" align="left" valign="top">
<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="middle">
<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.
|
Example 3: (border tricks)
<table cellpadding="1" cellspacing="0" width="250" 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="#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="#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:
Example 4: (more border tricks)
<table cellpadding="0" cellspacing="0" width="450" align="center">
<tr>
<td width="220">
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#C0C0C0"><tr><td>
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#E8E8E8"><tr><td align="center">
<font size="2pt" face="arial">Heading 1</font>
</td></tr></table>
</td></tr></table>
</td>
<td width="10"></td>
<td width="220">
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#C0C0C0"><tr><td>
<table cellpadding="1" cellspacing="0" width="100%" border="0" bgcolor="#E8E8E8"><tr><td align="center">
<font size="2pt" face="arial">Heading 2</font>
</td></tr></table>
</td></tr></table>
</td>
</tr>
<tr>
<td width="220" valign="top">
<table cellpadding="8" cellspacing="0" width="100%" border="0"><tr><td>
<font size="2pt" face="arial">Put some text in this location...</font>
</td></tr></table>
</td>
<td width="10"></td>
<td width="220">
<table cellpadding="8" cellspacing="0" width="100%" border="0"><tr><td>
<font size="2pt" face="arial">Put more text in this location...</font>
</td></tr></table>
</td>
</tr>
</table>
|
The above HTML code segment would produce the following results in a web browser:
|
|
|
|
|
Put some text in this location...
|
|
|
|
Put more text in this location...
|
|
Example 5: (complex web page using a navigational left pane vertical bar)
<center>
<table cellpadding="1" cellspacing="0" border="0" bgcolor="#000000" width="100%"><tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!-- begin left pane of content area -->
<td width="20%" 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><h3><b>Welcome, to my web page!</b></h3>
</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:
Final Thoughts
Tables are used when 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 when creating complex web page layouts. The table <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 web sites. Read on for more about displaying images...
Move on to next topic: Displaying Images - Adding Life to Your Pages
[Back to Top]
|
![[warebiz] :: Programming Bizness](/images/logo.gif){kind=logo}
