Tables for Layout

Using Tables to Control Layout

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	Put whatever you want here.

Let's align things better:

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	Put whatever you want here.

Let's color each cell differently and put in some padding:

This is the left third of the page. I can go on and on here until I am bored. I can have lots and lots of multiple paragraphs also. I can put in links if I want you how to have access to other pages.	Put whatever you want here.
Notice that by default the heading row was centered and the data rows are left justified.	Over-ride left alignment for numbers

By the way, you should look at this in all the major browsers to see how the borders appear.

Next let's look at borders - none, 1(the default), and 7

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also, which I am forcing with line breaks. I can put in links if I want you how to have access to other pages.	The border is 0.

Look at the next table in all the majors browsers.
It appears that one can NOT use a span tag to change the alignment in the middle of a table cell. One can use a span tag to change other properties -e.g. color.

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	The border is 1. Did you know that a background color won't show up in an empty cell? The solution is to put a break tag in there.
This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	The border is 1. Did you know that a background color won't show up in an empty cell? The solution is to put a break tag in there.

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	The border is 7.

Let's continue the childish games.
How about a red border 3 pixels wide?
Again, please compare I.E. and Firefox and others.

Also note that by using the padding attribute in each th or td element I can get some space between the text and the edge of the cell.
Note that you will not get a border unless you specify the border-style!

This is the left third of the page. I can go on and on here until I am bored. I can have multiple paragraphs also. I can put in links if I want you how to have access to other pages.	The border is 3 and red. Did you know that a background color won't show up in an empty cell? The solution is to put a break tag in there.
Now comes some verbiage and data	1234
More verbiage and data	56