Tables, the Key to great looking web pages
A few notes about TABLES Because of the fact that you can use the same attributes in each of the three tags that make up a TABLE: <TABLE> <TR> <TD>, the attributes are prioritized. Attributes in the <TD> tag recieve the highest priority then the <TR> tag then the <TABLE> tag.
Tables display a bit different in Netscape than Internet Explorer. Netscape will display the outer border, even if it's a colored border, in two shades. Internet Explorer will display the outer border as one shade if you use the BORDERCOLOR= attribute. You can make two shaded colored borders with Internet Explorer by using the unwieldly BORDERCOLORLIGHT= and BORDERCOLORDARK= attributes in the TABLE tag. You can even use completely different colors in each of those attributes for some really wild looking table borders if you wanted to. To remove all borders and rules in a Netscape TABLE you must use the BORDER=0 and CELLSPACING=0 attributes in the TABLE tag. If you do not include the BORDER=0 attribute in the TABLE tag, Netscape will by default leave a 2 pixel space between cells (<TD>) and rows (<TR>). Netscape also likes to make all cells in the same row the same width as much as possible. Internet Explorer on the other hand, will try and make a cell as small as possible, so seperate cells in the same row can be different sizes, depending on what type of data is placed into the cells. Of course you can contol the size of individual cells and rows using the WIDTH= and HEIGHT= attributes.
You can control the appearance of TABLES better with Internet Explorer than you can with Netscape. But the differences are generally subtle and most web pages don't incorporate the Internet Explorer only attributes anyway, but its good to be aware of the differences.
Examples of Tables | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| An example of: | A 1 row, 1 cell TABLE with a border | A 1 row, 2 cell TABLE with a border
| The HTML Code
| <TABLE BORDER=1><TR><TD> | Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. <TABLE BORDER=1><TR><TD> | Your HTML code here </TD><TD> Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. The results as viewed on a web page
| |
|
An example of:
| A 2 row, 1 cell p/row TABLE with a border
| A 2 row, 2 cell p/row TABLE with a border
| The HTML Code
| <TABLE BORDER=1><TR><TD> | Your HTML code here </TD></TR> <TR><TD> Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. <TABLE BORDER=1><TR><TD> | Your HTML code here </TD><TD> Your HTML code here </TD></TR> <TR><TD> Your HTML code here </TD><TD> Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. The results as viewed on a web page
| |
|
OK...get the idea? You can add as many rows and cells or as many cells per row as you want just by using the above formulas. All the cells and rows will be of the same dimensions and alingments. They will expand automatically to be as large as needed to contain the data that you place inside of them. This is a great way to layout tabular information, like a multiplication table or a price list or name and address lists etc. For more complex layouts, say like you might see in the pages of a magazine or newspaper, you need to use the ROWSPAN and COLSPAN attributes as shown below.
| An example of:
| A 2 row TABLE, 1 cell on top 2 on bottom with BGCOLORS with a BORDER
| A 4 row TABLE with BGCOLORS assinged in the TR tag and TD tag using COLSPAN and ROWSPAN
| The HTML Code
| <TABLE BORDER=3> | <TR><TD COLSPAN=2 BGCOLOR=RED> Your HTML code here </TD></TR><TR BGCOLOR=PLUM><TD> Your HTML code here </TD><TD> Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. <TABLE BORDER=3> | <TR BGCOLOR=RED><TD ROWSPAN=3> Your HTML code here </TD><TD COLSPAN=2> Your HTML code here </TD></TR><TR BGCOLOR=PLUM><TD> Your HTML code here </TD><TD> Your HTML code here </TD></TR><TR><TD BGCOLOR=GOLD> Your HTML code here </TD><TD BGCOLOR=SILVER> Your HTML code here </TD></TR><TR BGCOLOR=LIME> <TD ALIGN=CENTER COLSPAN=3> Your HTML code here </TD></TR></TABLE> Go to the practice board and try it. The results as viewed on a web page
| |
|
Note how the text in the larger cell on the left is now vertically alinged in the center. This happens by default when one cell is larger and spans more than one adjacent row/cell. The above examples show how you can control cell placement and color assingment to each row or each individual cell in a row. The next examples will use BORDERCOLOR, CELLPADDING, CELLSPACING, BACKGROUND, ALIGN and VALIGN attributes.
| An example of:
| A simple 2 row TABLE using a BACKGROUND image for a ficticious auction advertisement
| The HTML Code
| <TABLE BACKGROUND=images/clouds.gif BORDER=5 BORDERCOLOR=#C000C0 CELLSPACING=5 CELLPADDING=15> | <TR><TD COLSPAN=2 ALIGN=CENTER> <FONT SIZE=+3 COLOR=#C000C08><b>Antique Capodimonte Pitcher </TD></TR><TR><TD ALIGN=CENTER VALIGN=MIDDLE> <IMG SRC=images/pitcher.jpg><br>Authentic Capodimonte Pitcher 1770 </TD><TD VALIGN=TOP> <FONT COLOR=#C000C08><CENTER><b>Beautiful antique pitcher from the reign of<BR><i>Napoleon Bonaparte</i></CENTER><p>This pitcher was smuggled off the island of St. Helena where Napoleon spent the last years of his life imprisoned and exiled from France by the British. The pitcher is accented and layered with 24 KT gold on the inside. H and painted cherubs relax in a garden of flowers. Mint condition. No cracks, chips or crazing. Authenticated and certified this pitcher has been appraised at over $1,000,000. No reserve. Bidding starts at $100,000. Payment by certified bank check only. Delivery will be made by hand in person under armed guard. </TD></TR></TABLE> Go to the practice board and try it. The results as viewed on a web page
| |
In the above example, this TABLE will look a bit different in Netscape and Internet Explorer but they both look OK. Netscape will not place the BACKGROUND image into the CELLSPACING area. It will show what ever color is under the table. So if the web page is white you will see white space in that area. Internet Explorer will display the BACKGROUND image inside of all areas of the TABLE in the absence of any other attribute in a ROW or CELL to override it. This can lead to some interesting effects. | The CELLPADDING=15 attribute makes a 15 pixel margin on all sides of any data, text or images, you place into each cell of the TABLE. If you notice in the smaller examples above, the text is all the way against the sides of the cells in the absence of any CELLPADDING. The CELLSPACING=5 creates 5 pixels of space between each cell in the table, and creates that thin border around each cell. The CELLSPACING effect can look quite different in Netscape than it will in Internet Explorer. I used the BORDERCOLOR=#C000C0 to give it a purplish color and the text is the same color too. This is an easy TABLE for auctions. You can control the alignment of the text in relationship to the image better this way than just using the ALIGN= attribute in the IMG SRC tag. | ||||||||||||||||||||||||||||||||||||
Quick Start
What is HTML?
Text and Fonts
Using Images
Making Links and Mailto Links
Making Lists
Tables, the key to well designed HTML documents
Examples of Tables
Color Chart by Name
Hexadecimal Color Chart
Practice board
Copyrighted 1999-2000 e-pixs.com
