sobota 10. prosince 2016

Tabulka a její proměny

sobota, prosince 10, 2016 2 komentáře

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 :-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

2 komentáře:

  1. Vsadím se, že tě to napadlo sepsat hned po tom dnešním ránu, když jsi mi pomáhala měnit barvu těch hlaviček :D
    Jinak je to super návod, až budu chtít ty tabulky upravovat, tak budu vědět, jak to upravit! :)

    OdpovědětVymazat
    Odpovědi
    1. Kdepak, napadlo mě to už dřív. Ale jsem hrozně líná ty návody sepisovat :-D

      Vymazat


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...