Tables are the easiest method of controlling the layout of pages (though frowned on now because the real replacement is stylesheets).
Tables consist of the <TABLE></TABLE> tags between which you place a <TR></TR> table row tag for each row you want. Between the table row tags, each column is set using a <TD></TD> table data tag, followed by the data. For example...
<TABLE border=1>
<TR>
<TD> Cell one </TD>
<TD> Cell two </TD>
</TR>
<TR>
<TD> Cell three </TD>
</TR>
</TABLE>
Looks like this...
| Cell one | Cell two |
| Cell three |
Merging, sizing, and formatting cells, and controling borders
You can set cells to span more than one row or column by placing 'rowspan = X' or 'colspan = X' in the <TD> tag, where 'X' is the number of cells to span. You can also set cells to be highlighted as headers by replacing the table data tags <TD></TD> with <TH></TH>.
In above example there's a filled in space below Cell two. To open up a cell, simply fill it with a non-breaking space, the code for which is .
Cell width is set by putting 'width = X%' in the table data or table tags, where 'X' is some percentage of the final screen or table respectively. You can also use just a number rather than a %, which is taken to be the width in pixels.
To put some space between the cells' content and border, put <TABLE cellpadding=7> (or some other pixel distance) in the table tag. You can also use cellspacing=7 which works on the distance between the cells and the outside of the table.
The border width around cells can be set by placing 'border = X' in the table tag where 'X' is a number.
border = 0 gives invisible tables that can be used to do simple positioning in a page. Using cells filled with text, images etc. You can use tables with no border as a reliable method for putting text next to pictures, for instance, contact details next to your photo. For an example, look at the source of this page.
Bringing all this together we can make a table with some headers, a thick border and with some empty and spanning cells, for example...
<TABLE border = 5 width = 70% cellpadding=10>
<TR>
<TH width = 50%> Cell one </TH>
<TH width = 50%> Cell two </TH>
</TR>
<TR>
<TD colspan = 2> Cell three </TD>
</TR>
<TR>
<TD rowspan = 2> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
Gives us...
| Cell one | Cell two |
|---|---|
| Cell three | |
Try using an invisible table to structure the information on your new homepage into columns, for example, with your contact details on one side, and some other information about your interests on the other. In general tables are a quick and easy solution for small bits of complex layout, but for more large-scale page layout you should use stylesheets (see below).
Go forward to learn about stylesheets.