| Member of the ILE | Free Home Pages at GeoCities |
[Main page] [HTML help] [MIDI page] [Murphy's Laws] [More information]
[Feedback form to email me] [Sign guestbook] [Mail me!]
Tables are somewhat complicated to understand, but very, very customizable. That's why you should keep the code in your text HTML file nicely arranged, because it's easy to get lost in the tag mess.
You start the table with a <TABLE> tag. Usually, tables autoscale so that they fit in the window, that is, their width. However, it's possible to define the width of the entire table by using a WIDTH=xxx element inside the tag, like <TABLE WIDTH=400>. The width, written as a number, would be in pixels; if the number is followed by a % sign, it is relative to the size of the view window.
To tell the browser that the table has ended, you need to put the matching end-tag </TABLE>. This way, the entire table must be enclosed in the two TABLE tags.
To begin a new row, use the <TR> tag. Every cell must have a row, so that's why the first element after <TABLE> must be <TR>.
Now comes the content of the table. For every cell you want to create, begin it with a <TD> tag, and put after it the text and graphics you want in that cell. You can set the width for individual cells: by default the width of the entire column is equal to the width of the largest cell. You can set a fixed value for the column by putting a WIDTH=xxx attribute in the <TD> tag, just like you did in the <TABLE> tag. Let's see a simple example of what can a table do:
<TABLE WIDTH="100%"> <TR VALIGN=TOP ALIGN=LEFT> <TD>Apples<TD>Celery <TR VALIGN=TOP ALIGN=LEFT> <TD>Oranges<TD>Carrots </TABLE>This text would be presented in your browser as:
| Apples | Celery |
| Oranges | Carrots |
Now, if we change the WIDTH parameter to a, let's say, 50%, our table would show up as follows:
| Apples | Celery |
| Oranges | Carrots |
You can use the tables to list data, or to align text in better ways (or, as you could see, to make nice shopping lists :-) ).
Normally, the whole content in a cell aligns to the left and to the center of the cell, if there is any space. That could lead to impredictable results:
| Element1 | Element1 Element2 Element2 Element2 etcetera... |
See the second column? See the first column? Suppose you want the left column to be a navigation bar, don't you find it disgusting if all the links were in the middle of the page (which can get very, very long) instead of at the beginning? Simple fix to it: put a VALIGN=TOP attribute in the <TD> tag where you want the text to align at the top. Replace TOP with BOTTOM if you want it to align at the bottom of the cell. Now, let's look at the same table, with the VALIGN=TOP attribute set:
| Element1 | Element1 Element2 Element2 Element2 etcetera... |
You see the difference?
And as I mentioned navigation bars, and that reminds me of frames, and that leads me to say there are 50% of browsers in the market who can't support frames, wouldn't it be great if every page loaded a navigation bar in itself, at the left? Would you like to learn something about it?
That's easy: create a table with two cells: the left one with a fixed size, and put no attributes for the second cell. Put all of your page's text in the second cell, and put the navigation's bar elements on the first one. Remember to set the VALIGN=TOP attribute for the navigation bar to come at the beginning of the table.
Now, EVERY page must have that arrangement, for obvious reasons: browsers will load an entirely new page when clicking any of the links in the navigation bar, so you will have to put the links on every page and update them all at once when the navigation bar must change.
Now that you got a simple table, I'll tell you some variations for the tables:
Want a border within? Just include a BORDER=xxx attribute in your <TABLE> tag, where xxx represents the width of the table border, in pixels. You'll have to do your own attempts, to see what suits you best.
Different examples: BORDER=1, BORDER=2, and BORDER=3
|
|
|
Maybe you want a background picture displayed behind your table or any cell of it: use the BACKGROUND="url" attribute in the <TABLE> or <TD> tag, respectively, and type the URL of the background graphic where it says URL. If what you want is a color, then put a BGCOLOR="#rrggbb" attribute in it, the way it's done for the <BODY> tag. Hey, click here to check for an example.
Sorry, but this implementation works only on Internet Explorer 3 and above.
Several tables following each other won't arrange themselves on a single line, so you have to force them to do so, if that is what you want.
| Element1 | Element1 Element2 Element2 Element2 etcetera... |
| Element1 | Element1 Element2 Element2 Element2 etcetera... |
| Element1 | Element1 Element2 Element2 Element2 etcetera... |
Guess how? Yes, simple: nest each table on a cell of a new table like this:
|
|
|
Get it? View the source code for this page to understand it better.
Sometimes you want to have extra space between cell borders and their content. Use the CELLPADDING=xxx attribute in the <TABLE> tag, with a value in pixels. This implies the change affects the entire table.
Here is an example of different CELLPADDING= attributes.
| Normal cell Element1 Element2 Element2 Element2 etcetera... |
| CELLPADDING=10 set Element1 Element2 Element2 Element2 etcetera... |
| CELLPADDING=20 set Element1 Element2 Element2 Element2 etcetera... |
It might be needed to add more space between cells and the frame of the table. Use the CELLSPACING=xxx attribute in the <TABLE> tag, with a value in pixels. This implies the change affects the entire table. If your table has a border, each outermost cell will be separated xxx pixels from it.
Here is an example of different CELLPADDING= attributes.
| Normal cell Element1 Element2 Element2 Element2 etcetera... |
| CELLSPACING=5 set Element1 Element2 Element2 Element2 etcetera... |
| CELLSPACING=10 set Element1 Element2 Element2 Element2 etcetera... |
Tables have a lot more customizable aspects in the HTML language. Due to time and space limits, I won't be bringing a deeper explanation of tables here in this chapter, but I'll have it ready as soon as I can. Really! By now, you can check all the attributes of the table tags in the HTMLRef.zip file, that I have offered you in the beginning of the document.
| Member of the ILE | Free Home Pages at GeoCities |