Rámování tabulek

Toto řešení ukazuje, jak můžeme formátovat tabulky, především jejich okraje, abychom dosáhli co nejlepšího vizuálního efektu. Různé styly rámečků kolem tabulek a jednotlivých buněk usnadňují vnímání jejich obsahu a zvyšují přehlednost prezentovaných dat.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Riki Fridrich. Bližší popis najdete v článku Rámovanie tabuliek.

CSS

/* obecné */
th,td
{
padding: 0.25em 0.25em;
vertical-align: baseline;
}
th
{
background-color: #EEE;
}
table#uplnyram,
table#hram,
table#vran,
table#komlexram,
table#specialram,
table#oldschool
{
border-collapse: collapse;
}
/* uplný rám*/
table#uplnyram td, table#uplnyram th
{
border: 1px solid black;
}
/* horizontální rám*/
table#hram td, table#hram th
{
border-color: black;
border-style: solid;
border-width: 1px 0px;
}
/*vertikální rám*/
table#vran td, table#vran th
{
border-color: black;
border-style: solid;
border-width: 0px 1px;
}
/* Tabulky podobné tabulkám HTML 4 */
table#oldschool
{
border-top: solid #CCC 8px;
border-left: solid #CCC 8px;
border-bottom: solid #999 8px;
border-right: solid #999 8px;
}
table#oldschool th
{
border-bottom: double #CCC 3px;
}
table#oldschool td
{
border-bottom: double #CCC 3px;
border-left: double #CCC 3px;
}
/* Speciální rámování */
table#specialram
{
border: 3px solid black;
}
table#specialram th
{
border-right: 3px double black;
border-bottom: 1px solid #ccc;
}
table#specialram td
{
border-color: black;
border-style: solid;
border-width: 1px 0px;
}
/* Komplexní příklad rámování */
table#komlexram
{
border: 3px solid black;
width: 32em;
}
table#komlexram caption
{
caption-side: top;
font-style: italic;
padding: .3em .5em;
border: dashed black 1px;
background: url(„gradient.gif“) top left repeat-x;
}
table#komlexram thead
{
background: #555;
text-align: center;
}
table#komlexram thead th
{
border-left: dotted #666 1px;
border-bottom: double black 3px;
}
table#komlexram tbody td
{
border-bottom: solid black 1px;
border-left: solid black 1px;
border-right: solid black 1px;
}
table#komlexram tbody th
{
border-bottom: dotted #666 1px;
text-align: left;
}
table#komlexram tfoot
{
text-align: left;
}
table#komlexram tfoot th, table#komlexram tfoot td
{
background: #ddd;
border-top: double black 3px;
border-left: dotted #666 1px;
}

XHTML, 1. tabulka – Úplný rám

<table id=“uplnyram“>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</table>

XHTML, 2. tabulka – Horizontální rám

><table id=“hram“>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</table>

XHTML, 3. tabulka – Vertikální rám

<table id=“vran“>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</table>

XHTML, 4. tabulka – Speciální rámování

<table id=“specialram“>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</table>

XHTML, 5. tabulka – Tabulky podobné tabulkám HTML 4

<table id=“oldschool“>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</table>

XHTML, 5. tabulka – Komplexní příklad rámování

<table id=“komlexram“>
<caption>Název tabulky</caption>
<thead>
<tr>
<th/>
<th>1.</th>
<th>2.</th>
<th>3.</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Součet</th>
<td>Součet 1</td>
<td>Součet 2</td>
<td>Součet 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>první položka</th>
<td>bod jedna</td>
<td>bod dva</td>
<td>bod tři</td>
</tr>
<tr>
<th>druhá položka</th>
<td>bod čtyři</td>
<td>bod pět</td>
<td>bod šest</td>
</tr>
<tr>
<th>třetí položka</th>
<td>bod sedm</td>
<td>bod osm</td>
<td>bod devět</td>
</tr>
</tbody>
</table>