Tables and borders

However many manufacturers of superflat monitors were praised, always there is a force working in the opposite direction: they are programmers who in any way cannot will reconcile to two-regularity of the screen and continually scan: « you allow 3D! ».

Pseudo-tridimentionality surrounds us everywhere: where it is necessary and it is not necessary. If, for example, button by definition should stick out from the monitor of what were guilty harmless hr and table? The first was already considered{examined} in a note ¹ 12, now we shall talk how on a root to kill tridimentionality of the last.

Way the first

Let's use attribute cellspacing, creating a transparent framework mezh all cells{cages} of the table. It is necessary to paint only her  in the certain color, and to make it it is possible with the help of property bgcolor tags table and td:

<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>

<tr>

    <td bgcolor=white> *nbsp; </td>

    <td bgcolor=white> *nbsp; </td>

</tr>

<tr>

    <td bgcolor=white> *nbsp; </td>

    <td bgcolor=white> *nbsp; </td>

</tr>

</table>

The mercy reader will ask: and why it is impossible to place bgcolor=white at once in a tag tr, thus considerably having compressed a code? On what the author will answer: that is why, detochka I, that dvoechnik on rendering NN6 will paint all the line long white color, and cried our vertical ramochki.

Nevertheless, the code really turns out bulky, therefore on the approach …

Way of the second

The idea is peeped in source codes of Studio Lebedeva and essentially does not differ from previous: completely we include the initial table in external for which it is registered necessary bgcolor.

<table bgcolor=black border=0 cellpadding=0 cellspacing=0 width=100> <tr> <td>

<table bgcolor=white border=0 cellpadding=2 cellspacing=1>

<tr>

    <td> *nbsp; </td>

    <td> *nbsp; </td>

</tr>

<tr>

    <td> *nbsp; </td>

    <td> *nbsp; </td>

</tr>

</table>

</td> </tr> </table>

Code considerably polegchal, praise to coders of Studio Lebedeva. But also this way is not deprived lacks: try to unpack{print out} such table on the printer. It has turned out? Figushki because Internet Explorer by default does not print color and figures of a background.

« Before to unpack{print out} this page, please, go in the menu Service, choose item{point} of Property of an observer, open the tab In addition and in section the Seal note a tick To print colors and figures of a background. Thanks ». Will suffice to rave, it is better poklanjaemsja in legs CSS:

Way the third

Really, what to us prevents to specify to each cell property border?

td {

border: solid black 1px

}

And that, my dear, that thus on a place of contact of cells will turn out a framework thickness in two pixels. On specifications, this problem should solve property border-collapse with value collapse. In this case the next borders should "swallow" each other. We shall leave this happiness to our grandsons because now this property does not support any browser. From here follows …

Way the fourth

In a scientific way it is called as a division of labour:

table.border {

border-color: black;

border-style: solid;

border-width: 0 1px 1px 0

}

table.border td, table.border th {

border-color: black;

border-style: solid;

border-width: 1px 00 1px

}

All is simple up to a disgrace. Each cell responds only for the top and left frameworks. It are necessary to finish only long right and bottom frameworks. It is assigned to property border the table.

Alexander Shurkaeva's note. Actually, CSS property border-collapse completely (values separate and collapse) is supported IE5 +, NN6/Mozilla, Opera 4 +, that quite justifies his  use. Take into account only what to set property border-collapse it is necessary at the declaration tega table while border it is set at the description of cells:

table.border {

border-collapse:collapse

}

table.border td, table.border th {

border:1px solid *CC0000

}