Formátování tabulek

Toto řešení ukazuje běžné i méně obvyklé způsoby formátování tabulek. Zajímavá je například možnost formátovat sloupce tabulky.

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

Podrobnosti o formátování tabulek najdete na CSS2 – formátovací možnosti tabulek.

CSS

body
{
font-family: sans-serif;
background: #ffc;
}
div.obal
{
background: #ddd;
margin-bottom: 1em;
padding: 10px;
width: 40em;
}
table
{
text-align: left;
margin: auto;
}
table caption
{
margin: auto;
background: #cfa;
font-style: italic;
padding: .2em .5em;
}
th, td
{
padding: 0 .3em;
}
#tab1 table
{
border: solid #666 2px;
background: #eee;
width: 30em;
empty-cells: hide;
border-collapse: collapse;
color: #333;
}
#tab1 th
{
text-align: left;
}
#tab1 .obarvit_sloupec
{
background: #bbb;
}
#tab1 tr.prvni
{
border: solid #666 1px;
font-style: italic;
}
#tab1 tr.posledni
{
border: solid #666 1px;
}
#tab2 table
{
border: solid black 2px;
border-collapse: collapse;
background: #bbb;
width: 30em;
}
#tab2 thead
{
font-style: italic;
background: #579;
color: #eee;
border: solid black 2px;
}
#tab2 tfoot
{
border: solid black 2px;
background: #eee;
}
#tab2 tbody td
{
color: navy;
}
#tab2 th
{
text-align: left;
}
#tab3 table
{
border: solid black 2px;
background: #79b;
width: 30em;
border-collapse: collapse;
}
#tab3 th
{
text-align: left;
}
#tab3 tr.zahlavi th
{
border-bottom: solid black 2px;
}
#tab3 tr
{
background: #ffd;
}
#tab3 th, #tab3 td
{
border: solid black 1px;
}
#tab3 tr.sudy *
{
background: #ddb;
}
#tab3 tr.zahlavi th
{
background: #79b;
}

XHTML, 1. tabulka

<div id=“tab1″ class=“obal“>
<table>
<caption>Lorem ipsum …</caption>
<col/><col class=“obarvit_sloupec“/><col/><col class=“obarvit_sloupec“/><col/>
<tr class=“prvni“>
<th/>
<th>I</th>
<th>II</th>
<th>III</th>
<th>Součet</th>
</tr>
<tr>
<th>Východ</th>
<td>7</td>
<td>7</td>
<td>5</td>
<th>19</th>
</tr>
<tr>
<th>Západ</th>
<td>6</td>
<td>4</td>
<td>7</td>
<th>17</th>
</tr>
<tr>
<th>Sever</th>
<td>8</td>
<td>7</td>
<td>9</td>
<th>24</th>
</tr>
<tr class=“posledni“>
<th>Součet</th>
<th>21</th>
<th>18</th>
<th>21</th>
<th>60</th>
</tr>
</table>
</div>

XHTML, 2. tabulka

<div id=“tab2″ class=“obal“>
<table>
<caption>Lorem ipsum …</caption>
<thead>
<tr>
<th/>
<th>I</th>
<th>II</th>
<th>III</th>
<th>Součet</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Součet</th>
<th>21</th>
<th>18</th>
<th>21</th>
<th>60</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Východ</th>
<td>7</td>
<td>7</td>
<td>5</td>
<th>19</th>
</tr>
<tr>
<th>Západ</th>
<td>6</td>
<td>4</td>
<td>7</td>
<th>17</th>
</tr>
<tr>
<th>Sever</th>
<td>8</td>
<td>7</td>
<td>9</td>
<th>24</th>
</tr>
</tbody>
</table>
</div>

XHTML, 3. tabulka

<div id=“tab3″ class=“obal“>
<table>
<caption>Lorem ipsum …</caption>
<tr class=“zahlavi“>
<th/>
<th>sapien</th>
<th>erat vel massa</th>
</tr>
<tr>
<th>scelerisque</th>
<td>pellentesque</td>
<td>neque</td>
</tr>
<tr class=“sudy“>
<th>nulla nisl</th>
<td>consectetuer</td>
<td>tristique</td>
</tr>
<tr>
<th>ullamcorper</th>
<td>accumsan</td>
<td>augue</td>
</tr>
<tr class=“sudy“>
<th>convallis</th>
<td>semper</td>
<td>lacinia</td>
</tr>
<tr>
<th>egestas</th>
<td>metus</td>
<td>quis neque</td>
</tr>
<tr class=“sudy“>
<th>at quam</th>
<td>auctor</td>
<td>pellentesque</td>
</tr>
<tr>
<th>lamcoper</th>
<td>at accumsan</td>
<td>lentes</td>
</tr>
</table>
</div>