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

Tables in HTML were meant to be used to show tabular data, such as the list of useful attributes in the how - to make tables page or a pricelist or such. Anything with information that is logically presented in a row and column format.

In actuality they have been heavily used for page formatting. This is supposed to be superceded with CSS (Cascading Style Sheets). My attempts to replace the use of tables for layout completely, have not yet been very successful

Simple Navigation Bar table

View source to see how this was done...

About Products Services Order Tech Support Cust.Svc. Contact Us

Highlighting text using tables

View source to see how this was done...

An important point can be set off and made eye - catching this way.

I 'm sure you' ve seen articles, especially long feature articles in magazines and newspapers where important points, or catchy quotes are repeated next to, or in the midst of the main text.Often these are distinguished with larger letters, different font or decorative edges.

This is one way to create a similar effect on webpages by using tables.

Page with columns of text

View source to see how this was done...


Here can go top of page logo and name without being in a table, but when columns begin....


Home
Products
Top
Best
Super
Wow!

Order Now By: Web
Secure
Insecure
Hacker Door
Phone
US 800 #
Local callers
International
Fax
BBS number

About Us
the Hype
the Reality
the Sad truth
Come Play
Here we are

Site Map

A heading

Lots of text and pictures and whatever ...

the content of your page.

So imagine a picture or table to the side here, and whatever good stuff you want to say on your page here.

this type of layout is common for sites that have a lot of content to present.

If you would like more space between columns, set cellspacing or cellpadding to the number of pixels of blank space desired.

     
 

This is a 'nested' table masquerading as an image to spice up the page.

Don't go overboard with nesting tables though, simplest is generally best.

 
     

Some Other Heading

In order to have text in this column this table is 3 cells wide. the other ways this could be done are to put the text

  • inside of pre tags which is more difficult to read, or
  • inside a nested table (probably simpler in design than the one above).

A nested table can be aligned to be side-by-side with text by using the same align="left" or right attribute as you would use for an image.


Bottom of page stuff like a copyright notice, a navigation bar table like above, or whatever.