Using tables.
All tables start with <table> and end with </table>
A table row starts with <tr> and ends with </tr>
A table cell starts with <td> and ends with </td>
Example of a simple 3 cell table that will span the screen:
<table width=100%>
<td>
CELL CONTENT
</td>
<td>
CELL CONTENT
</td>
<td>
CELL CONTENT
</td>
</table>
Tables let you positon things exactly on the page, but they can also let the browser decide. The table command I use the most is <table width=100%>
width=100% tells the browser to try to make the table fit the screen width. I use it so my pages will fit anyones screen.
You can also use the width tag to specify the exact width of a cell, in pixels. If you want a picture that is 480 by 60 pixels in a cell, you can make that cell 480 pixels wide by replacing the <td> command with
<td width=480>
In the above simple table, you get three cells of undefined width. If you put something wide in one of the cells, the browser will make the other two cells smaller. Very handy. As long as the total width of what you put in the table cells does not exceed the width of the screen that is!
Notice there are no table row commands, <tr> and </tr>
Sometimes you will want to use rows, but they are not required.
Lets look at other tags we can put in the table definition.
Borders. The default table will make a narrow border around each cell, to control the width of this border we use the border tag, like this
<table border=0 width=100%>
A value of 0 gives no border at all, otherwise put in the number of pixels you want for your border width.
Background color. You can define the background color for the whole table in the table command. To have a blue background we add the bgcolor tag to the table command like this
<table bgcolor="blue" border=0 width=100%>
You can also use the hex number for a color to get the exact shade you want, just replace blue with a 6 digit hex number.
Height. You can use the height tag to define the height of the table in pixels. Let's make the table 38 pixels high
<table bgcolor="blue" border=0 width=100% height=38>
Alignment. There are two alignment tags, align and valign (vertical). You have several options, for align you can use left, right, and center. For valign you use top, bottom, and middle. These are most often used to position the contents of a cell within the cell itself. If we wanted a cell's content to be in the upper left of a cell, we could write
<td align=left valign=top>
CELL CONTENT can be just about anything you can put on a webpage. Text will automatically wrap in each cell. If you leave the height undefined, and put a lot of text in a cell, the browser will automatically make the cell tall enough to hold all the text.
