Tabulky

Vlastnosti tabulky, řádků, nadpisových a datových buněk

Tak jako u seznamů, které se skládají z dvojice html značek, můžeme u tabulek zapsat některé vlastnosti u značky table (některé vlastnosti, např. border-collapse, musí být uvedeny právě utéto značky, jinde by nefungovaly), jiné vlastnosti zapíšeme u tr, respektive u th a td.

Ukázka orámování tabulky, orámování všech buněk a orámování pouze řádků

table {
  border: 1px solid #241917;
}

Pyramidy	Egypťané
Visuté zahrady	Babylóňané
Artemidin chrám	Řekové

td {
  border: 1px solid #241917;
}

Pyramidy	Egypťané
Visuté zahrady	Babylóňané
Artemidin chrám	Řekové

tr {
  border: 1px solid #241917;
}

Pyramidy	Egypťané
Visuté zahrady	Babylóňané
Artemidin chrám	Řekové

Buňky záhlaví th mají implicitně tučné písmo a zarovnání na střed, datové buňky td jsou zarovnány vlevo. Toto nastavení můžeme změnit pomocí css stylů a můžeme přidat další vlastnosti.

Příklad formátování nadpisových a datových buněk

V CSS souboru zapíšeme styly pro značky th a td. Shodné vlastnosti můžeme zapsat ve společné definici (html značky oddělené čárkou).

Název	Datum stavby	Civilizace
Pyramidy	2 550 př. n. l.	Egypťané
Visuté zahrady	600 př. n. l.	Babylóňané
Artemidin chrám	550 př. n. l.	Řekové

  th,td {
    font-family: Arial;
    text-align: left;
    border: 1px solid #6E4941;
    padding: 1px 5px;
  }
  th {background-color: #DAC6BB;}
  td {background-color: white;}

Potřebujeme-li naformátovat některé z buněk odlišně od ostatních, použijeme třídu stylu (class).

Příklad použití tříd stylů

V CSS souboru vytvoříme třídy stylů:

.vpravo {text-align: right;}
.stred {text-align: center;}

Název	Datum stavby	Civilizace
Pyramidy	2 550 př. n. l.	Egypťané
Visuté zahrady	600 př. n. l.	Babylóňané
Artemidin chrám	550 př. n. l.	Řekové

V HTML kódu přiřadíme třídy stylů parametrem class:

<table>
<tr>
  <th>Název</th>
  <th class="vpravo">Datum stavby</th>
  <th class="stred">Civilizace</th>
</tr>
<tr>
  <td>Pyramidy</td>
  <td class="vpravo">2 550 př. n. l.</td>
  <td class="stred">Egypťané</td>
</tr>
<tr>
  <td>Visuté zahrady</td>
  <td class="vpravo">600 př. n. l.</td>
  <td class="stred">Babylóňané</td>
</tr>
<tr>
  <td>Artemidin chrám</td>
  <td class="vpravo">550 př. n. l.</td>
  <td class="stred">Řekové</td>
</tr>
</table>

Chceme-li formátovat určité sloupce nebo určité řádky, můžeme ve stylech využít definice prvního nebo n-tého prvku.

Příklad použití n-tého prvku

V CSS souboru zapíšeme styly pro první sloupec (first), druhý (resp. n-tý sloupec) a poslední (last):

td:first-child {
  text-align: left;
}
td:nth-child(2) {
  text-align: right;
}
td:last-child {
  text-align: center;
}

Název	Datum stavby	Civilizace
Pyramidy	2 550 př. n. l.	Egypťané
Visuté zahrady	600 př. n. l.	Babylóňané
Artemidin chrám	550 př. n. l.	Řekové

Obdobně můžeme zapsat styly pro první řádek (first), pro vytvoření pruhů sudých a lichých řádků můžeme využít definice pro n-tý řádek s hodnotou odd (lichý) a even (sudý). Pozn.: Definice pro první řádek musí být pod definicí lichých řádků. Buňky musí být průhledné.

th,td {
  background-color: transparent;
}
tr:nth-child(odd) {
  background-color: lightyellow;
}
tr:nth-child(even) {
  background-color: white;
}
tr:first-child {
  background-color: #DAC6BB;
}

Název	Datum stavby	Civilizace
Pyramidy	2 550 př. n. l.	Egypťané
Visuté zahrady	600 př. n. l.	Babylóňané
Artemidin chrám	550 př. n. l.	Řekové
Diova socha	435 př. n. l.	Řekové
Mauzoleum	351 př. n. l.	Helénská civilizace
Rhódský kolos	292-280 př. n. l.	Helénská civilizace
Maják	200-300 př. n. l.	Helénská civilizace

V html kódu není pro formátování potřeba nic uvádět:

  <table>
  <tr>
    <th>Název</th>
    <th>Datum stavby</th>
    <th>Civilizace</th>
  </tr>
  <tr>
    <td>Pyramidy</td>
    <td>2 550 př. n. l.</td>
    <td>Egypťané</td>
  </tr>
  <tr>
    <td>Visuté zahrady</td>
    <td>600 př. n. l.</td>
    <td>Babylóňané</td>
  </tr>
  <tr>
    <td>Artemidin chrám</td>
    <td>550 př. n. l.</td>
    <td>Řekové</td>
  </tr>
  <tr>
    <td>Diova socha</td>
    <td>435 př. n. l.</td>
    <td>Řekové</td>
  </tr>
  <tr>
    <td>Mauzoleum</td>
    <td>351 př. n. l.</td>
    <td>Helénská civilizace</td>
  </tr>
  <tr>
    <td>Rhódský kolos</td>
    <td>292-280 př. n. l.</td>
    <td>Helénská civilizace</td>
  </tr>
  <tr>
    <td>Maják</td>
    <td>200-300 př. n. l.</td>
    <td>Helénská civilizace</td>
  </tr>
  </table>

Základní css vlastnosti pro tabulky

Vlastnosti písma a barvy jsou stejné jako pro nadpisy a odstavce.

Vlastnosti tabulky - table
margin	vnější okraj tabulky	margin: 20px 10px 5px 10px;	margin: 15px;
border-collapse	splynutí rámečků	border-collapse: separate;	border-collapse: collapse;
Vlastnosti buněk - th, td
padding	vnitřní okraje	padding: 2px 10px 1px 10px;
border	rámeček	border: 1px solid #6E4941;
text-align	zarovnání textu	text-align: left;	text-align: right;
text-align	zarovnání textu	text-align: center;	text-align: justify;
vertical-align	zarovnání na výšku	vertical-align: top;	vertical-align: down;
vertical-align	zarovnání na výšku	vertical-align: middle;

Další užitečné vlastnosti

border-spacing	mezera mezi buňkami	border-spacing: 10px;
empty-cells	zobrazení prázdných buněk	empty-cells: hide;	empty-cells: show;
white-space	zalamování obsahu buněk	white-space: nowrap;	white-space: normal;