16 November 2000
 Simon Gronlund
is earning his Master of Science in Computer Science at the Royal Institute of Technology, Sweden, as an adult student. He also teaches Java and computer-related
courses at the college. When he isn't tampering with his Warp 4 PC, he spends his spare time with his two boys and his wife.
If you have a comment about
the content of this article, please feel free to vent in the OS/2 eZine
discussion
forums |
|
Hands on your home page -- III
Basic layout
At the beginning of the time a web page was a flat text file sparsely formatted by HTML tags, as from the
first hands on two numbers ago. But quickly pictures were added to these pages. And by the time any kind of bells and whistles have found their way into
the web pages.
Still HTML is not at all suited for layout, not as well as modern desktop pagemakers are. But with force
and and a shoehorn web designers try to make flashy sites out of common HTML. This hands-on will give you a way to do the most basic layout to your site,
and also point to some bad behaviors that you frequently suffer from.
Tables
In the early days of HTML tables were introduced, to be used as tables and no more. But in fact the tables
had no restriction to what to stuff into them, as we soon will see. The area of this page that you are reading right now is in fact a table. And the three
topmost links are stuffed into a small table that itself is located within a single cell of the bigger table, as you can see here.
|
The HTML tag used to create a table is as simple as <TABLE> and </TABLE>. To that we declare a
new row with <TR> and its partner </TR> and at then we add cells with <TD> and </TD> each cell, TR is read TableRow and TD of
course TableData. In some cases you would like headers each column and that is <TH> and </TH> on a row by itself (unfortunately my HomePage
Publisher changes the code of this page so you can not view the source and see the code like I intended to). And a table caption is <CAPTION> and
</CAPTION>, inside the table tags but before the first row. Hence the table to the right is made of this code
<TABLE>
<CAPTION><CENTER>Caption</CENTER></CAPTION>
<TR>
<TH>First head</TH>
<TH>Second head</TH>
</TR>
<TR>
<TD>First cell</TD>
<TD>Second cell</TD>
</TR>
</TABLE>
|
Caption
|
First head
|
Second Head
|
|
First cell
|
Second cell
|
|
But we see no table and everything is packed together, it looks like we have to add something. Let us try
to add a border, default is no border or BORDER=0, but now we add BORDER=2 within the TABLE tag. And further we add CELLPADDING=5 also within the TABLE
tag. CELLPADDING tells the browser how many pixels to padd around the content inside the cells. CELLPADDING is very useful since you
seldom want the text as packed together as seen in the previous example. There is CELLSPACING too, that gives the width of the lines between the cells,
counted in pixels. I do not use that here, but please try it out yourself.
<TABLE BORDER=2 CELLPADDING=5>
<CAPTION><CENTER>Caption</CENTER></CAPTION>
<TR>
<TH>First head</TH>
<TH>Second head</TH>
</TR>
<TR>
<TD>First cell</TD>
<TD>Second cell</TD>
</TR>
</TABLE>
|
Caption
|
First head
|
Second Head
|
|
First cell
|
Second cell
|
|
Now we will explore some more variables, like VALIGN and ALIGN. The default values are MIDDLE and LEFT respectively,
but for vertical alignment TOP, MIDDLE and BOTTOM are valid, and horizontal alignment uses LEFT, CENTER and RIGHT.
<TABLE BORDER=2 CELLPADDING=5>
<TR>
<TH>First head</TH>
<TH>Second head</TH>
<TH>Third head</TH>
</TR>
<TR>
<TD ALIGN=RIGHT>First cell</TD>
<TD>Second cell</TD>
<TD ALIGN=CENTER>Third cell</TD>
</TR>
<TR>
<TD VALIGN=TOP>First cell</TD>
<TD>Second cell<BR>more data</TD>
<TD VALIGN=BOTTOM>Third cell</TD>
</TR>
</TABLE>
|
|
First head
|
Second Head
|
Third head
|
|
First cell
|
Second cell
|
Third cell
|
|
First cell
|
Second cell
more data
|
Third cell
|
|
If an entire row is to be vertical aligned the same way it is simplest to add VALIGN=?? to the row instead.
These ALIGN and VALIGN can be used to both the table and the rows, test and see.
So far we have used equal number of cells each row, and no cell spans more than one row. But you may very
well use COLSPAN or ROWSPAN to see to that. But I suggest you make a sketch of how you like to do the layout first, since it is very important you declare
a new row when needed. Here comes a simple example and note how the cells are numbered. Here you easily understand that it is very easy get lost, and
how will Netscape ever be able to figure out what you thought .
<TABLE BORDER=2 CELLPADDING=5>
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
<TD>1.3</TD>
<TD>1.4</TD>
<TD>1.5</TD>
</TR>
<TR>
<TD>2.1</TD>
<TD COLSPAN=4>2.2 is a very wide cell</TD>
</TR>
<TR>
<TD ROWSPAN=3>3.1<BR>a<BR>tall<BR>cell</TD>
<TD>3.2</TD>
<TD>3.3</TD>
<TD>3.4</TD>
<TD>3.5</TD>
</TR>
<TR>
<TD>4.2</TD>
<TD ROWSPAN=2 COLSPAN=3>4.3 has both width<BR>
and<BR>height</TD>
</TR>
<TR>
<TD>5.2</TD>
</TR>
</TABLE>
|
|
1.1
|
1.2
|
1.3
|
1.4
|
1.5
|
|
2.1
|
2.2 is a very wide cell
|
3.1
a
tall
cell
|
3.2
|
3.3
|
3.4
|
3.5
|
|
4.2
|
4.3 has both width
and
height
|
|
5.2
|
|
It is this latter usage of ROWSPAN and COLSPAN together with a zero border that you may use to add layout
to your pages. And do not forget that you may add another table within any cell you like. There is no end to what you may add to the cells.
Now I will mention the WIDTH attribute that may be added to both the TABLE and the TD tags. The WIDTH may
be set in pixels or percent, but if pixels are used, do not forget that still many readers are using quite small screens, 640 x 480 is not that
rare. Percent used on the table is computed from the browser's width or the available space within the cell it is located within, whichever is applicable.
Shorthand, the percent of a table is computed from the available width.
But percent to the cells are counted from the table width. Hence a table may be set to a fix width i pixels,
but the cell's width is computed in percent. Further it is possible to mix percent and pixel widths.
Still it is up to the browser to decide if the width you have set is to be used or not, but if everything
else seems okay the browser most often is rather submissive, but do not trust it.
Also note the quotes. And note that each cell of the same column has to be of the same width, that is logical.
And a warning: Many word processors like StarOffice and others, loves to set the width without asking you.
Many times it is better to let the width become the browsers choice, else anything may happen to the outcome.
<TABLE BORDER=2 CELLPADDING=5 WIDTH="90%" ALIGN=RIGHT>
<TR>
<TD WIDTH=110>First cell</TD>
<TD WIDTH="50%">Second cell</TD>
<TD>Third cell</TD>
</TR>
<TR>
<TD WIDTH=110>First cell</TD>
<TD WIDTH="50%">Second cell</TD>
<TD>Third cell</TD>
</TR>
<TR>
<TD WIDTH=110>First cell</TD>
<TD WIDTH="50%">Second cell</TD>
<TD>Third cell</TD>
</TR>
</TABLE><BR CLEAR=ALL>
|
First cell
|
Second cell
|
Third cell
|
|
First cell
|
Second cell
|
Third cell
|
|
First cell
|
Second cell
|
Third cell
|
Finally you may add color to the table and/or the rows and/or the cells. The tag is BGCOLOR added within the TABLE, TR or TD tag. Here comes an example
with mixed colors.
<TABLE BORDER=2 CELLPADDING=5 BGCOLOR="Yellow">
<TR>
<TD>First cell</TD>
<TD>Second cell</TD>
<TD>Third cell</TD>
</TR>
<TR BGCOLOR="Aqua">
<TD>First cell</TD>
<TD>Second cell</TD>
<TD BGCOLOR="White">Third cell</TD>
</TR>
<TR>
<TD>First cell</TD>
<TD BGCOLOR="Lime">Second cell</TD>
<TD>Third cell</TD>
</TR>
</TABLE>
|
|
First cell
|
Second cell
|
Third cell
|
|
First cell
|
Second cell
|
Third cell
|
|
First cell
|
Second cell
|
Third cell
|
|
The preset colors available are as follows, but if there is need for more any value on the HEX standard
is useful. That is for example BGCOLOR="#12ABFF". For
a more detailed discussion, read the first article on HTML please.
-
Aqua
-
Black
-
Blue
-
Fuchsia
|
-
Gray
-
Green
-
Lime
-
Maroon
|
-
Navy
-
Olive
-
Purple
-
Red
|
-
Silver
-
Teal
-
White
-
Yellow
|
So far you will be able to do any layout you can think of. The most fancy site you visit uses some kind
of table layout. It is only your imagination that sets your limit, or as said "the sky is the limit".
The pitfall
Many sites using tables start with a huge one splitting up the entire page in numerous smaller cell with both
COLSPAN and ROWSPAN, or a few cells divided by new tables inside these cells. To that dozens of images and a lot of text is to be added. What is the result?
A time consumer!
Since the browser can not begin to render nothing of a table until its content is known, that is the width
and height of the images, the size of the texts etc. If there is only a few items it is no problem, but with numerous of them there is a lot of time gone
before the browser can show you the slightest little character.
First, be very careful to tell the size of each image you use (read the former article). Second, try to
use several tables only a few rows or only one row high, but put the tables on top of each other. This way the browser can start render your page much
quicker and you must not wait until the entire page is downloaded. For example, this page uses one table at the top, then there is no table at all (except
for the code examples used) until the bottom table. This way this page is rendered very quickly to you. But other pages uses one big table for the entire
page, even if the most of it is text only, that perfectly well may be written without a table, or at least divided into a few tables piled up. Even better
for text is to use the BLOCKQUOTE tag.
Another pitfall is that the very nice page you have made, that looks superb at your place, may look awful
at other browsers. Still that is because it is always up to the browser to make the final decision on how to render a page. Thus, do
not pay that many endless nights on that last pixel, it will never look that nice anyway <grin>.
A final word on tables. From time to time you must add that token into an empty cell, that it
will work the way you want. ( is no-break-space and can also be used whenever you want a white space but you do not like a line break at that
space).
Thanks for this time. If you find a good looking site, do not hesitate to view the source of it and to
use its ideas, the web is free.