tabulky
Tabulky
Přehled tagů
| Tag |
Význam |
Párový |
Výskyt |
| table |
tabulka |
ano |
|
| tr |
řádek tabulky |
nepovinně |
<table>, <tbody>, <thead>, <tfoot> |
| td |
buňka tabulky |
nepovinně |
<tr> |
| th |
hlavičková buňka tabulky |
nepovinně |
<tr> |
| caption |
hlavička tabulky |
ano |
<table> |
| col |
ovlivnění sloupce tabulky |
ne |
<table> |
| colgroup |
skupina sloupců tabulky |
ne |
<table> |
| tbody |
tělo tabulky |
nepovinně |
<table> |
| thead |
hlavička tabulky |
nepovinně |
<table> |
| tfoot |
patička tabulky |
nepovinně |
<table> |
Tabulka pomocí css:
caption
| První th |
Druhý th |
| První td |
Druhý td |
| Další td |
Další td |
<table style="margin:auto; border-spacing:10px;" >
<caption>caption</caption>
<col style="background-color:black">
<col style="background-color:olive">
<tr>
<th style="border: 3px solid red;">První th</th>
<th style="border: 3px solid blue;">Druhý th</th>
</tr>
<tr>
<td style="border: 3px double;">První td</td>
<td style="border: 3px solid green;">Druhý td</td>
</tr>
<tr>
<td style="border: 5px solid;">Další td</td>
<td style="border: 5px solid green;">Další td</td>
</tr>
</table>
Tagu col se dá přiřadit relativně malá množina
stylů: border, background, width a visibility.
Plus jejich odvozeniny, jako například border-color.
Col se tedy nedá použít například
na zarovnávání textu nebo barvu textu.
Tabulka s hlavičkou, tělem a patičkou.
| Jedna |
Dvě |
Tři |
| 1 |
2 |
3 |
| I |
II |
III |
<table border="2" cellpadding="16" cellspacing="5">
<thead style="background-color:red" >
<tr>
<th> Jedna </th>
<th> Dvě </th>
<th> Tři </th>
</tr>
</thead>
<tbody style="text-align:center">
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</tr>
</tbody>
<tfoot style="font-size:100px">
<tr>
<td> I</td>
<td> II</td>
<td> III</td>
</tr>
</tfoot>
</table>
Table
Uzavírá celou strukturu tabulky, obsahuje další atributy:
Atributy tagu <table>
| atribut |
význam |
možné hodnoty |
nahradit CSSkem |
| align |
obtékání tabulky ostatním textem |
left, right, center |
float u table |
| cellpadding |
vnitřní okraj buněk |
pixely |
padding u td |
| cellspacing |
vnější okraj buněk |
pixely |
border-spacing u table |
| border |
šířka rámečku buněk |
pixely |
border (v plném tvaru) u td |
| width |
minimální šířka tabulky |
délka nebo procento |
width u table |
| height |
minimální výška |
délka nebo procento |
height u table |
| background |
obrázek na pozadí |
URL obrázku |
background-image |
| bgcolor |
barva pozadí |
Barvy |
background-color |
| bordercolor |
barva rámečku |
Barvy |
border-color u td |
| frame |
vykreslení rámečku okolo |
void, border, box, hsides, vsides, above, below, lhs,
rhs |
rozdílný border-style u table a u td |
| rules |
vykreslení mřížky |
none, all, rows, cols, groups |
rozdílný border-style u table a u td |
| summary |
stručné shrnutí obsahu |
text pro čtečky pro nevidící |
|
| ukázka float, height, width |
background-color, border-spacing, border, cellpadding, border-color |
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.Text k obtékání.
<table style="float:right; height:200px; background-color:olive; border-spacing:10px" border="30" cellpadding="15">
<tr>
<td> ukázka float, height, width </td>
<td> background-color, border-spacing, border, cellpadding, border-color </td>
</tr>
</table>
<table style="background-image:url(../images/info.gif );color:red; border-spacing:10px" border="10" cellpadding="20">
<tr>
<td> ukázka </td>
<td> background-image </td>
</tr>
</table>
Frame
Hodnoty atributu frame
| frame |
Popis |
| void |
Tabulka je bez rámečku. (Standardní hodnota.) |
| above |
Rámeček je pouze na horní straně tabulky. |
| below |
Rámeček je pouze na spodní straně tabulky. |
| hsides |
Rámeček je pouze na horní a spodní straně tabulky. |
| vsides |
Rámeček je pouze na levé a pravé straně tabulky. |
| lhs |
Rámeček je pouze na levé straně tabulky. |
| rhs |
Rámeček je pouze na pravé straně tabulky. |
| box |
Rámeček je okolo celé tabulky. |
| border |
Rámeček je okolo celé tabulky. |
<table border="10" frame="vsides" cellpadding="20">
<tr>
<td> ukázka </td>
<td> frame </td>
</tr>
</table>
Rules
Hodnoty atributu rules
| rules |
Popis |
| none |
Tabulka je bez mřížky. (Standardní hodnota.) |
| groups |
Mřížka bude pouze mezi skupinami řádek
(thead , tfoot a
tbody ) a mezi skupinami sloupců
(colgroup ).
|
| rows |
Mřížka bude pouze mezi řádky tabulky. |
| cols |
Mřížka bude pouze mezi sloupci tabulky. |
| all |
Mřížka bude mezi všemi buňkami. |
| ukázka |
rules |
| ukázka |
rules |
| ukázka |
rules |
<table border="10" rules="rows" cellpadding="20">
<tr>
<td> ukázka </td>
<td> rules </td>
</tr>
<tr>
<td> ukázka </td>
<td> rules </td>
</tr>
<tr>
<td> ukázka </td>
<td> rules </td>
</tr>
</table>
Spojování buněk
<table border="5" cellpadding="10">
<tr>
<td colspan="3"> A </td>
</tr>
<tr>
<td rowspan="2">B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">E</td>
</tr>
</table>
