Tabulka a její proměny

Dnes jsem se rozhodla vám ukázat, jak vytvořit jednoduchou tabulku a co všechno si na ní můžete vylepšit... Používat ji můžete například na seznam přečtených knih, na knižní maratony a tak podobně.

Můj návod.

Kopírovat se zdrojem! 

Základní tabulku napíšete do článku přes html. Je to jednoduché. Tu vložíte a vyplníte. Její vzhled se pak dá nastavovat přes šablonu.

<table>
<tr>        <th>hlavička 1</th>
            <th>hlavička 2</th>
            <th>hlavička 3</th>
   
    </tr>
<tr>
            <td>buňka 1</td>
            <td>buňka 2</td>
            <td>buňka 3</td>
    </tr>
<tr>
            <td>buňka 4</td>
            <td>buňka 5</td>
            <td>buňka 6</td>
    </tr>
<tr>
            <td>buňka 7</td>
            <td>buňka 8</td>
            <td>buňka 9</td>
    </tr>
</table>

th ... jde o hlavičku tabulky, její nadpisy
tr ... představuje každý řádek tabulky
td ... představuje buňku v každém řádku


Pokud chcete dát sloupcům konkrétní šířky, vkládáte je přímo to tabulky. Každá buňka musí mít své vlastní zadání - v pixelech nebo procentech.

<table>
<tr> 
   <th width="100">hlavička 1</th>
   <th width="60">hlavička 2</th>
   <th width="140">hlavička 3</th>

 </tr>
<tr>
   <td width="100">buňka 1</td>
   <td width="60">buňka 2</td>
   <td width="140">buňka 3</td>
 </tr>
<tr>
   <td width="100">buňka 4</td>
   <td width="60">buňka 5</td>
   <td width="140">buňka 6</td>
 </tr>
<tr>
   <td width="100">buňka 7</td>
   <td width="60">buňka 8</td>
   <td width="140">buňka 9</td>
 </tr>
</table>

<table>
<tr> 
   <th width="30%">hlavička 1</th>
   <th width="50%">hlavička 2</th>
   <th width="20%">hlavička 3</th>

 </tr>
<tr>
   <td width="30%">buňka 1</td>
   <td width="50%">buňka 2</td>
   <td width="20%">buňka 3</td>
 </tr>
<tr>
   <td width="30%">buňka 4</td>
   <td width="50%">buňka 5</td>
   <td width="20%">buňka 6</td>
 </tr>
<tr>
   <td width="30%">buňka 7</td>
   <td width="50%">buňka 8</td>
   <td width="20%">buňka 9</td>
 </tr>
</table>

Nebo lze nastavit šířku tabulky na celou šířku článku a buňky se už samy přizpůsobí (níže v návodu).

Použijte základní tabulku a pak otevřete šablonu. Následující kódy dáváte nad ] ] ></b:skin>

Rámeček tabulky

table
{
border: 1px solid #dadada;
}

Rámeček buněk

td, th
{
border: 1px solid #dadada;
}

Rámeček tabulky i buněk

td, th
{
border: 1px solid #dadada;
}

table
{
border: 1px solid #dadada;
}

Rámeček buněk bez mezer

td, th
{
border: 1px solid #dadada;
}

table
{
border-spacing: 0;
}

Rámování jen na určité straně - dole buňky i záhlaví

.post table td, .post table th
{
border-bottom: 1px solid #dadada;
}

Rámování jen na určité straně - dole buňky

.post table td
{
border-bottom: 1px solid #dadada;
}

Odsazení textu v buňce

Text nebude namačkaný hned na okraji...

td
{
padding-left: 3px;
padding-right: 3px;
}

Šířka tabulky

Bez upravení vypadá takto...

Se šířkou 100%...

table
{
width: 100%;
}

Se šířkou 75%...

table
{
width: 75%;
}

Se šířkou 400px...

table
{
width: 400px;
}

Obarvené pozadí hlavičky

V tomto případě jsem použila i další úpravy. Změnila jsem barvu textu pomocí color: #000;. Pozadí jsem obarvila na jinou barvu, aby bylo zvýrazněné background: #FBE3EA;. A text v buňkách hlavičky je celý velkými písmeny text-transform: uppercase. 

table th
{
background: #FBE3EA;
text-align: center;
color: #000;
text-transform: uppercase;
}

Použít lze i jinou variantu jako například font-variant: small-caps;.

table th
{
background: #FBE3EA;
text-align: center;
color: #000;
font-variant: small-caps;
}

Tabulka bez rámování

V tomto případě můžete vidět holou tabulku bez rámování s obarveným záhlavím. Buňky jsou s mezerami, proto v hlavičce vzniká bílá mezera...

Kombinace různých prvků

V této poslední ukázce vám ukáži, že s tabulkou jde dělat všechno možné, i když v tomto případě už je to trošku složitější...

Do CSS v šabloně vložíte toto - šířka tabulky na celou stránku, pozadí a úpravy hlavičky:

table th
{
background: #808080;
text-align: center;
color: #000;
font-variant: small-caps;
}

table
{
width:100%;
}

V článku přes html vložíte upravenou tabulku takto, protože pozadí buňek lze vkládat i ručně, ale pracně...:

<table>
<tr>       
            <th>hlavička 1</th>
            <th>hlavička 2</th>
            <th>hlavička 3</th>
</tr>
<tr>
            <td>buňka 1</td>
            <td>buňka 2</td>
            <td>buňka 3</td>
</tr>
<tr>
            <td bgcolor="#CCCCCC">buňka 4</td>
            <td bgcolor="#CCCCCC">buňka 5</td>
            <td bgcolor="#CCCCCC">buňka 6</td>
</tr>
<tr>
            <td>buňka 7</td>
            <td>buňka 8</td>
            <td>buňka 9</td>
</tr>
<tr>
            <td bgcolor="#CCCCCC">buňka 10</td>
            <td bgcolor="#CCCCCC">buňka 11</td>
            <td bgcolor="#CCCCCC">buňka 12</td>
</tr>
<tr>
            <td>buňka 13</td>
            <td>buňka 14</td>
            <td>buňka 15</td>
</tr>
<tr>
            <td bgcolor="#CCCCCC">buňka 16</td>
            <td bgcolor="#CCCCCC">buňka 17</td>
            <td bgcolor="#CCCCCC">buňka 18</td>
</tr>
</table>

Další kombinace už záleží jen na vaší představivosti. Doufám, že se vám návod líbil a na příště zase něco vymyslím :-)