SeznamySeznamy
číslovaný
s odrážkami
seznam definic
­ výčty položek různého typu
<ol>
<li>prvni</li>
<li>druha</li>
<li>treti</li>
</ol>
Seznam číslovanýSeznam číslovaný
1 prvni
2 druha
3 treti
Kód Zobrazení
<ul>
<li>prvni</li>
<li>druha</li>
<li>treti</li>
</ul>
Seznam s odrážkamiSeznam s odrážkami
 prvni
 druha
 treti
Kód Zobrazení
<dl>
<dt>prvni termin</dt>
<dd>obsah1</dd>
<dt>druhy termin</dt>
<dd>obsah2</dd>
</dl>
Seznam definicSeznam definic
prvni termin
obsah1
druhy termin
obsah2
Kód Zobrazení
Typy seznamůTypy seznamů
Typ odrážek/číslování
disc 
circle 
square 
1 1, 2, 3, ...
a a, b, c, ...
A A, B, C, ...
i i, ii, iii, ...
I I, II, III, ...
--
použití v elementech ul, ol
<ul type=""> <ol type="" >
Styly v seznamechStyly v seznamech
Typ odrážek/číslování
disc 
circle 
square 
decimal 1, 2, 3, ...
lower-alpha a, b, c, ...
upper-alpha A, B, C, ...
lower-roman i, ii, iii, ...
upper-roman I, II, III, ...
--
použití v elementech ul, ol
list-style-type:
ul {list-style-type: square}
ol {list-style-type: lower-roman}
Styly v seznamech IIStyly v seznamech II
Pozice odrážek/číslování
list-style-position: inside|outside
ul {list-style-position: inside}
 Xxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxx xxxxxxxxxxxx
 Xxxxxxxxxxxxxx xxxxx
xxxxxxxxx xxxxxx xxxxxxx x
 Xxxxxxxxxxxxxx xxxxx
xxxxxxxxx xxxxxx xxxxxx
 Xxxxxx xxxxxxxxxxxxx
xxxxxxxxx xxxxxxxxxxxx
Tabulky ­ základní strukturaTabulky ­ základní struktura
?
<th> </th> <th> </th>
<table summary="shrnutí obsahu tabulky">
<caption> Nadpis tabulky </caption>
</table>
<tr> </tr>
<td> </td> <td> </td>
<tr> </tr>
<td> </td> <td> </td>
záhlaví
tělo tabulky
<tr> </tr>
Slučování buněk v řádkuSlučování buněk v řádku
<td colspan="3"> ... </td>
<table>
<tr>
<td colspan="3"> ... </td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td></td> <td></td>
</tr>
</table>
Slučování buněk ve sloupciSlučování buněk ve sloupci
<td rowspan="2"> ... </td>
<table>
<tr>
<td rowspan="2"> ... </td> <td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td> <td></td>
</tr>
</table>
Tabulky ­ formátováníTabulky ­ formátování
border šířka rámečku
bordercolor barva rámečku
cellpadding vzdálenost textu v buňkách od rámečku
cellspacing vzdálenost mezi buňkami
Atributy značky <table>
<table border="2" cellpadding="5" cellspacing="0">
Př.
cellspacing
text v buňce
cellpadding
border
Tabulky ­ formátováníTabulky ­ formátování
Tabulky ­ styly CSSTabulky ­ styly CSS
border-style styl rámečku
dotted, inset, dashed, outset, double,
solid, groove, ridge, none
border-width šířka rámečku
border-left-width
border-right-width
border-top-width
border-bottom-width
border-color barva rámečku
použití pro elementy table, td, th
Tabulky ­ styly CSS IITabulky ­ styly CSS II
border: šířka styl barva
td {border: 1px solid black}
th {border-bottom: 5px double blue}
Mezery mezi buňkami
Sdružování vlastností rámečku
table {border-collapse: collapse}
<table cellspacing="0">
Formátování sloupcůFormátování sloupců
<col style="color:blue" />
<col />
<col style="font-weight:bold; text-align: center" />
<col style="formát sloupce" />
Xxx
xxx
xxx
Xxx
xxx
xxx
Xxx
xxx
xxx
Xxx
xxx
xxx