Web Start Letter - Website Tips and Info by Email Your Email:
We will never sell or give away your email address.

Internet Basics
   About the Internet
   About Web Browsers
   Why Domain Names

Getting Started
   HTML vs XHTML
   Making Webpage Files
   Naming Webpage Files

HTML Basics
   About HTML Tags
   Basic HTML Page
   DTDs and Doctype Tags
   Spaces and New Lines
   Special Characters
   Bold, Italics, More
   Writing Headlines
   Adding Links
   Making Lists
   Comments in HTML

Images and Colors
   How to Add Images
   Sources of Images
   Image File Formats
   Optimizing Images
   Color in HTML & CSS
   "Web-safe" Color Chart

More Advanced HTML
   Making Tables
   Formatting with Tables
   Making Forms
   Using Imagemaps
   Using Frames
   Meta Tags

Cascading Style Sheets
   Intro to CSS
   Ways to include CSS
   Some Useful CSS
   CSS Hover for Links

More
   Promoting Your Site
   How-To's Homepage
   Links

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

Sample Code

<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 -->

Appearance

View source to see how alternate tables were made.

This table is made using the same xhtml tags shown to the left.

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit


This is the same table with border="0" instead of border="1".

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as above with the header cells left aligned.

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as the top one except cellpadding="5"

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

This is the same table as the top one except cellspacing="5"

Fruit Color Seeds
Apple Red or Green 5 in the core
Strawberry Red Covered with small seeds
Peach Orange big pit

Attributes

Many other attributes can be set for tables. the most useful are:

width use in table or td tag specify as a percentage or in pixels
don't set wider than 600 if you can help it
height you can use in td tag specify in pixels, but you won't get less than the height of a row of text in Netscape
bgcolor use in table or td tag specify with the usual color numbers
align use in table or td tag choices are left, right, and center
valign use in table or td tag choices are top, bottom, and center
rowspan use in td tag specify that a certain cell extends down for more than one row
colspan use in td tag specify that a certain cell reaches across more than one column
border use in table tag specify how wide the border lines between cells should be, 0 = no border

Quirks

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.