About the Internet
About Web Browsers
Why Domain Names
HTML vs XHTML
Making Webpage Files
Naming Webpage Files
About HTML Tags
Basic HTML Page
DTDs and Doctype Tags
Spaces and New Lines
Bold, Italics, More
Comments in HTML
How to Add Images
Sources of Images
Image File Formats
Color in HTML & CSS
"Web-safe" Color Chart
Intro to CSS
Ways to include CSS
Some Useful CSS
CSS Hover for Links
Promoting Your Site
tables - How to make them
Tables were added to HTML fairly early on, They are intended to be used to display tabular data, for example product specifications and comparisons.
Ever since their introduction they have been used heavily for formatting web pages. This type of use of a content specification to specify page layout and appearance is just the sort of thing that HTML4.0, XHTML, and CSS are trying to put an end to. However we are still in a transition period, and many existing sites still depend on tables for layout.
It is very important with tables to get the beginning and ending tags matched properly or some browsers will not show your table at all.
It is a good idea to indent your table code to help you keep track of your tags.
Sample table - code and appearance
<table border="1"> <!-- begin table --> <tr> <!-- begin row --> <th> <!-- begin heading cell --> Fruit </th> <!-- end heading cell ---> <th> Color </th> <th> Seeds </th> </tr> <!-- end row --> <tr> <!-- new row --> <td> <!-- begin content cell --> Apple </td> <!-- end content cell --> <td> Red or Green </td> <td> 5 in the core </td> </tr> <tr> <td> Strawberry </td> <td> Red </td> <td> Covered with small seeds </td> </tr> <tr> <td> Peach </td> <td> Orange </td> <td> big pit </td> </tr> </table> <!-- end table -->
View source to see how alternate tables were made.
This table is made using the same xhtml tags shown to the left.
This is the same table with border="0" instead of border="1".
This is the same table as above with the header cells left aligned.
This is the same table as the top one except cellpadding="5"
This is the same table as the top one except cellspacing="5"
Many other attributes can be set for tables. the most useful are:
If you specify widths and heights they may not be honored. Netscape especially has a reputation for doing something else if it thinks the content warrants it. A cell with nothing in it, especially if there is nothing in that row or column may be 'collapsed' and disappear. If you want to hold that cell open either put in a or a transparent gif with height & width set to what you want to hold the cell open to.