Tabulka o šířce orámování 1px - 1/1
Tabulka o šířce orámování 1 pixel byla vždy v HTML trochu problém. Standardně je tabulka tvořena dvěmi orámováními, které jednak nevypadají příliš dobře a navíc v případě tisku zbytečně plýtváme inkoustem či tonerem. Ukážeme si, jak vytvořit jednoduchou tabulku o šířce okraje 1px vyhovující standardu XHTML.
Normální tabulka
| Jméno: | Josef |
|---|---|
| Příjmení: | Novák |
<table border="1">
<tr>
<th>Jméno:</th>
<td>Josef</td>
</tr>
<tr>
<th>Příjmení:</th>
<td>Novák</td>
</tr>
</table>
Jak udělat tabulku s jednoduchým orámováním o šířce 1px?
Dříve se například používaly pro dosažení efektu borderu o šířce 1 pixelu dvě vnořené tabulky. Border tak byl vlastně vykreslen pozadím spodní tabulky. Není to však ideální řešení. Nejenže vnořování tabulek není vhodné, navíc při tisku tabulky border nebyl vidět, protože tisk pozadí je většinou ignorován.
V knize nakladatelství Zoner Press Webdesign s webovými standardy je elegantně popsané následující řešení jednopixlové tabulky. Využívá toho, že lze nastavit jednotlivé barvy nitřních a vnějších okrajů, a že lze nastavit šířku okraje na 1px pomocí stylů. Dále elegantně řeší pomocí vlastnosti border-collapse spojení okrajů v místech překřížení. Bez nastavení této vlastnosti by v místech překřížení vznikala jednopixlová mezera.
Tato tabulka se šířkou 1px funguje v IE, Mozzila Firefox i Opeře. Bezproblémů lze se tabulka tiskne i s rámečkem.
Tabulka se šířku rámečku rovnou 1 pixelu
| Jméno: | Josef |
|---|---|
| Příjmení: | Novák |
<style type="text/css">
table.border1pxa {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
table.border1pxa td, table.border1pxa th {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
padding: 2px;
}
</style>
...
<table class="border1pxa">
<tr>
<th>Jméno:</th>
<td>Josef</td>
</tr>
<tr>
<th>Příjmení:</th>
<td>Novák</td>
</tr>
</table>
Případně lze výše uvedené řešení zjednodušit na:
| Jméno: | Josef |
|---|---|
| Příjmení: | Novák |
<style type="text/css">
table.border1pxb {
border-collapse: collapse;
}
table.border1pxb td, table.border1pxb th {
border: 1px solid #999;
padding: 2px;
}
</style>
...
<table class="border1pxb">
<tr>
<th>Jméno:</th>
<td>Josef</td>
</tr>
<tr>
<th>Příjmení:</th>
<td>Novák</td>
</tr>
</table>
Tato druhá jednodužší verze prý nefunguje správně v IE/Mac, kde jsou vidět zdvojené okraje. Je čistě na Vás, které verzi dáte přednost.