View source for Hands on your home page - Part 3

''by [[Simon Grönlund]]''
{|class="wikitable" align=right
|
*[[Hands on your home page - Part 1|Part 1]]
*[[Hands on your home page - Part 2|Part 2]]
*Part 3
|}

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 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 behaviours 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
{| width="100%" cellpadding="5"
| nowrap="nowrap" width="50%" valign="TOP" |
 <nowiki><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>
</nowiki>
| valign="TOP" |
{|
|+ <center>Caption</center>
|-
!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.

{| width="100%" cellpadding="5"
| nowrap="nowrap" width="50%" valign="TOP" |
 <nowiki><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>
 </nowiki>

| valign="TOP" |
{| border="2" cellpadding="5"
|+ <center>Caption</center>
|-
| '''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.

{| width="100%" cellpadding="5"
| nowrap="nowrap" width="50%" valign="TOP" |
 <nowiki><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>
 </nowiki>

| valign="TOP" |
{| border="2" cellpadding="5"
| align="CENTER" |
<center>'''First head'''</center>
| align="CENTER" |
<center>'''Second Head'''</center>
| align="CENTER" |
<center>'''Third head'''</center>
|-
| align="RIGHT" | First cell
| Second cell
| align="CENTER" |
<center>Third cell</center>
|-
| valign="TOP" | First cell
| Second cell<br /> more data
| valign="BOTTOM" | 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 though''.

{| width="100%" cellpadding="5"
| nowrap="nowrap" width="50%" valign="TOP" |
 <nowiki><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>
 </nowiki>

| valign="TOP" |
{| border="2" cellpadding="5"
| 1.1
| 1.2
| 1.3
| 1.4
| 1.5
|-
| 2.1
| colspan="4" | 2.2 is a very wide cell
|-
| rowspan="3" | 3.1<br /> a<br /> tall<br /> cell
| 3.2
| 3.3
| 3.4
| 3.5
|-
| 4.2
| rowspan="2" colspan="3" | 4.3 has both width<br /> and<br /> 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.
<pre><nowiki>
 <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>
</nowiki></pre>

{|width="90%" border="2" cellpadding="5"
| width="110" | First cell
| width="50%" | Second cell
| Third cell
|-
| width="110" | First cell
| width="50%" | Second cell
| Third cell
|-
| width="110" | First cell
| width="50%" | Second cell
| Third cell
|}

Finally you may add colour 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 colours.

{| width="100%"
| nowrap="nowrap" width="50%" valign="TOP" |
 <nowiki><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>
 </nowiki>

| width="50%" valign="TOP" |
{| border="2" cellpadding="5" bgcolor="Yellow"
| First cell
| Second cell
| Third cell
|- bgcolor="Aqua"
| First cell
| Second cell
| bgcolor="White" | Third cell
|-
| First cell
| bgcolor="Lime" | Second cell
| Third cell
|}
|}
The preset colours available are as follows, but if there is need for more any value on the HEX standard is useful. That is for example<code> BGCOLOR="#12ABFF"</code>. For a more detailed discussion, read the first article on HTML please.
{| width="100%"
|
: 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 <code>&amp;nbsp;</code> token into an empty cell, that it will work the way you want. (&nbsp; 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.

[[Category:OS/2 e-Zine article]]