[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]

Border models and empty cells

CSS2 offer two models, how to render table cell borders, which are inherited to sub parts of table elements. Here are two examples ([M][S][Pw]):

table {border-collapse: separate; border-spacing: 15pt} /* borders can't collapse each others; border-spacing (correspond the HTML-attribute cellspacing) */
table {border-collapse: collapse;} /* borders can collapse each others; CSS2 have priority rules in conflict situations */
W3C: CSS2: 17 Tables, 17.6 Borders[Pw].

In the separated borders model (border-collapse:separate) it is also possible to control the behavior of empty cells by using the property empty-cells (possible special values are show (according to CSS2 this should be the initial value) and hide). If to the element TABLE is used table-collapse:separate, border properties to the element TR should be ignored. The separate table model works only with elements TABLE and TD.

The element TR and some other elements work only with table-collapse:collapse. The initial value in browsers, which support border models should be according to the CSS2 specification border-collapse:collapse.

Browser-specific notes:

  1. The separate borders model works at least in Opera 4.x+ and Mozilla Gecko browsers. Opera hides as default empty cells. Mozilla Gecko browsers are in this matter DTD-dependent[S].

  2. MS IE 5.x+ doesn't support border-spacing and empty-cells properties. In MS IE border-collapse:separate works only as opposite to the border-collapse:collapse but the whole separate borders model is not supported. Border spacing values must define in MS IE by using the cellspacing HTML-attribute.

  3. The collapsing borders model works at least in MS IE 5.x+, Opera 4.x+ and according to an e-mail Mozilla 0.9.9+ browsers. Netscape 7.0 is the first Netscape browsers, which support this border rendering model. New Mozilla Gecko browsers don't render all defined borders at least in situations, where for all sides of table cells have not defined borders. Also MS IE and Opera have these problems. Opera 4.x-6.x has also as a problem that it can't center cell borders ([M][S][Pw]). MS IE and Opera 7.x+ give the nicest result in complex situations.

  4. Mozilla Gecko browsers define the default value as border-collapse:separate; border-spacing:2px. It is the same default value, which is commonly used in all browsers, when CSS is not used. It corresponds the default value cellspacing="2". Any browser doesn't use as the initial value border-collapse:collapse because browsers, which don't understand CSS2 table border models behave like tables, which have border-collapse:separate.

  1. Opera 3.x and Netscape 4.x don't support CSS-borders for tables.

  2. Border models don't work in MS IE 4.0 for Windows but it accepts CSS-borders for table elements.

  3. Browsers handle the border attribute of the TABLE element as if a set of predefined CSS-properties. This is following consistent the generic principles[S], how borders should be handled. For example following CSS corresponds the <TABLE border="10"> -definition:

    table {border-collapse:separate} /* not necessary because browsers use this value as the default value */
    table {border:10px solid; border-color: #bbb #7e7e7e #7e7e7e #bbb} /* The colors of the border attribute are browser-dependent. These values corresponds colors, which MS IE has with the HTML attribute. By experimentation can find colors, which correspond colors of the border attribute in other browsers. Look out more about border style from the page 8[S]. */
    th, td {border:1px solid; border-color: #7e7e7e #bbb #bbb #7e7e7e}
    /* The border attribute of the element TABLE defines to the table cells always only one pixel wide borders and only the border of the table itself can be thick */
  1. If you want one pixel borders or no borders to table cells, some browsers need border="0" and cellspacing="0" attributes. Try to define borders systematic so, that any cell don't have double borders and borders are defined to the correct sides.

    th, td {border: solid black;} /* common properties */
    td.left,th.left {border-width: 1px 1px 0px 1px;} /* cells on the left */
    td.right, th.right {border-width: 1px 1px 0px 0px;} /* other */
    .leftLast {border-width: 1px 1px 1px 1px;} /* the last cell on the left */
    .rightLast{border-width: 1px 1px 1px 0px;} /* other cells on the last row */
    ...
    <table cellspacing="0"...>
    <tr>
    <td class="left">...</td><td class="right">...</td>...
    ...
    <td class="leftLast">...</td>...<td class="rightLast"></td>
    </tr>
    </table>

    At this way you can get better layout for Netscape 4.x browsers, when you use background colors and concerning borders equal result to MS IE 4.0+ Windows browsers. Newest browsers (like Opera 6.x) don't need any HTML-attribute to assist defining the presentation of tables, but it is not today reasonable to define tables according them.

[Top]