[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Basic rendering methods

In addition CSS2 offers the possibility to change with table-layout:fixed the basic method, how the browser handle tables (The default value is auto. If you use grouping, you can cancel the change with this value by creating a new rule to tables, which you don't want to use it. The property isn't automatic inherited to child-tables.)

The browser doesn't read beforehand the whole table, but it needs the width value of the whole table, which it can get by setting width-values for the element TABLE or individual cells. To ensure proper functionality, you might need to define the width property both of the table and TH and TD elements. The browser counts as soon as possible how many columns the table has and then define column dimensions. The horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing. Below is an example of a simple definition:

table.someClass {width:600px; table-layout:fixed;}
table.someClass th, table.someClass td {width:150px}
/* if the width value for the table is smaller than the sum of total width values of individual cells, the browser increase the width of the table */

This method decrease drastic in modem connections the delay time before anything is rendered on the screen. Indeed the total time to download the page is quite the same, but the page is readable without waiting that the browser read first the whole page. The browser tries as soon as possible to render the viewport (window) area. This method is very useful in large tables, which have much text (an example table[S]).

If you want a wide cell above other cells, you need to define a hidden row:

.hiddenA {width:200px; font-size:0px; line-height:0}
.hiddenB {width:250px; font-size:0px; line-height:0}
.hiddenC {width:100px; font-size:0px; line-height:0}

...
<table>
<tr>
<td class="hiddenA"> </td>
<td class="hiddenB"> </td>
<td class="hiddenC"> </td>
</tr>
<tr>
<td colspan="3">
A wide cell.</td>
</tr>

...
</table>

The fast table layout method has also some disadvantages. If a long table has in the end more columns and then some extra cells, the browser ignores them. If table cells have wide images, they don't fit into cells.

Because table-layout:fixed affects in the basic level to the whole layout, if layout base on tables, before every project must think, if it is used or not. I recommend also to avoid nested tables and use instead DIV elements to delimit blocks inside tables.

The functionality of the fast table layout is however reasonable to test in many browsers. The main principle is that exact definitions gives the best results. The alternative solution is to use only DIV elements to build the basic structure of web documents. I handle this model in the next page.

Browser-specific notes:

  1. Table-layout:fixed works in MS IE 5.5+, Opera 4.x+ and Mozilla Gecko browsers. The overall functionality is best in Opera 4.x+ because Opera allows also to scroll partial read tables. By using MS IE 5.5 the reader must wait that the browser read first the whole table before he can scroll it.

  2. Opera 4.x has a minor bug. Even if in principle it is unnecessary to define the widths of first cells (elements TH or TD), Opera needs sometimes the width property to them, even if to the element TABLE has been defined the width value.

  3. Opera 4.x-6.x crop additional cell off if after the first row the table has more columns as in the first row. MS IE does that in long tables. Mozilla Gecko and Opera 7.x browsers show always all table cells.

  1. MS IE crops too wide images. Opera 4.x+ and Mozilla Gecko browsers render rest of images on nearby cells, but they don't increase the width of any cell according the space, which some image might need. By setting overflow:hidden also Opera and Mozilla behave at the same way as MS IE.

  2. In MS IE and, Mozilla Gecko and Opera 7.x+ browsers this situation can be helped by adding a DIV element and defining to it for example overflow:auto; width:150px. If the width value is smaller than the width of the image, it is possible to scroll the image but at least one scroll bar is always visible.

  3. Mozilla Gecko browsers need for low table rows the line-height property (for Opera only the font-size property is necessary).

[Top]