|
It is easy to design a new web page, using HTML tags, in which the space is divided up into columns and illustrations, like a typical newspaper page, by using Tables.
 In fact, all the http://biega.com pages have been designed that way. The header is one table.
NOTE! Since this page was written there have been many improvements. All the information on this page is correct, but it is now recommended to use Cascading Style Sheets to design web pages. In fact all Biega/Syrena pages have been designed with style sheets since 2010..
The body is a table with just two columns, the one on the left with the index to all the various pages, and the wide column, which is the main portion where all the text goes. For this discussion we will only look at this part of the page. Let's divide this part up into 4 new columns, but with the left and right columns wider than the 2 center columns, like the picture on the right.
Start out by laying out your page on plain paper, or on graph paper.
Then start your Table design using Table tags, making sure you provide a border (you will delete the border later).
In the example below, border lines help you visualize the cell structure.
| This is an example of using a Table, without border,
for arranging text and images spatially on the page. |
Note that in this example
the space has been divided |
into 4 columns. The image below uses 2 of them. |
We also use cells that extend over several rows.
|
Here we are going
to put a description of the city for which the map is shown on the right.
Note: we have specified a different font type for this cell. |
|
More text about the town |
| This row has only 1 cell!
The other columns occupied the remaining cells. |
|
Here's a cell which extends all across the page,
all 4 columns, for example a page footer. Finally
we must put the "End Table" statement </TABLE> |
Now let's take a look at the actual coding, line numbers have been added on the left to assist in the explanation:
NOTE: All tags have been shown in UPPER CASE for clarity. However in actual practise they should be written in lower case. ( for example <TR> should be written <tr>).
For a detailed, but clear, explanation of Table coding tags, please check this text with good examples.
I will limit myself to an explanation of the actual tags in this example:
- Line 59 - The width of a table is by default 100% and fills up the available space. So it is not essential to specify, unless you want to make the table narrower than the available space (for example 75%). You can specify the width in pixels, but I recommend against that unless you have a very definite reason to do so. Cellpadding has been specified 3 pixels (3 pixel space between contents of cell and its borders), so that spacing between text in adjacent columns will be 3+3= 6 pixels. Border is specified as "1" to assist us in designing the page. At the end we will change back to "0" because we don't want a border. Typical Data Tables will have borders (around the table and between cells), typically "1". The background color of this table has been specified to be white to make it stand out from the rest of the page which is light grey.. Please note that the font used in a table cannot be specified, it will always be the default font used by your browser. Fonts, if different, have to be specified separately in each cell.
- Line 61 - <TR> is the tag that starts a row. Alignment can be specified for the whole row, in this case vertical alignment in each cell is "top", horizontal alignment is "center". The defaults are vertical "middle" and horizontal "left" as in all the remaining rows.
- Line 62 - <td> is the tag that opens a cell. If width is not specified the browser will try to make cells all the same width. Normally it is sufficient to specify only in the top row. NOTE: cell height will be determined by that cell in a row that requires the largest amount of space.
- Line 68 - note that each cell and each row must be ended with the End Tags </td> and </tr> (Some articles say it is not necessary, but most browsers require this).
- Line 70 - <td rowspan="2"> tells this cell to extend down across 2 rows.
- Line 73 - <td colspan="2" rowspan="2"> tells this cell to extend to the right across 2 columns and down across 2 rows.
- Line 74 - This is the specification of the image, its size in pixels, the space around it and a link to the web page where it is located.
- Line 79 - Note that this row has only 1 cell, because the space of other cells has been preempted by previous cells that spanned several rows. You must keep careful track of this, otherwise you will get strange results. That is why it is desirable to use a table border to help you keep track of things. At the end, you will change border="1" back to border="0" in the Table statement on line 59. Also note that we specified a different bgcolor and font for this cell.
- Line 86 - Don't forget to place the End of Table tab </TABLE>.
It is desirable to specify column width at the head of the table. This can be done with the Tag "colgroup". For the table in this example, immediately after the <table> tag, you could write:
<COLGROUP width="30%">
<COLGROUP width="20%">
<COLGROUP width="20%">
<COLGROUP width="30%">
</COLGROUP>
An alignment attribute may also be included, such as - align="center" to cause all cells in that column to be aligned in the center. The alignment attribute (if specified) in an individual cell will still take precedence for that cell.
The width specification in each cell of the first row (as in the example above - Line 62 and following) is then no longer needed.
However, not all older browsers recognize the "Colgroup" tag. The method used in my example ensures that most browsers properly assign cell values.
Warning. Many users use laptop computers with 14" or smaller screens. To be readable on them the screen resolution has to be no more than 800 x 600 pixels. The readable width of the screen will be maximum 780 pixels. Therefore you should ensure that your layout is easily readable at that resolution. Make sure that any images fit into the cell width you have specified. A column width of 20% will only be 156 pixels. In the above example, the image is 200 pixels wide, but it occupies two columns, each of which is specified to be 20% wide. Therefore the space available is 2 x 0.2 x 780 = 312 pixels. Deduct the cell padding of 2 x 3 and the image spacing 2 x 5, a total of 16 pixels. Therefore 296 pixels are available for the image, more than enough for this example.
See an example of a page made using this technique. If you are curious how the page is designed, right click on the page, then select "View Page Source" in Netscape, or "View Source" in Microsoft Explorer.
To learn about the basics of Table Design, see
Tutorial in simple, step by step, easy to follow format.
Return to Top of page.
|
