Tabulky + zdroje dávám free !!!
Obsah je prostě nesmyslný ono každý si tam napíše co potřebuje. Tabulky jsou lehce ovlivněny dle css pravidel a zdroj tu také najdete. Jinak tabulky jsou nudné, ale potřebné a proto jsem je trošku poladil :). Jinak v praxi klepat tabulku je hodně nuda, takže pokud je kodér klasik jako já a píše v jen v notepadu nebo pspadu, pak si rozhodně zdrojáky kopíruje . Je to jako odrážkový seznam periodická rutina a to člověk obejde, jakýmkoliv stylem.| hlavička 1 | hlavička 2 | hlavička 3 |
|---|---|---|
| buňka těla 1 | buňka těla 2 | buňka těla 3 |
| buňka těla 4 | buňka těla 5 | buňka těla 6 |
| buňka těla 7 | buňka těla 8 | buňka těla 9 |
| čistá práce napsaná znak za znakem a teď ji už můžu jen kopírovat |
||
| x | Foto | Jméno | Příjmení |
|---|---|---|---|
| a |  |
Vincek | Králík |
| b | |
Franta | Pila |
| c | |
Hynek | Lopata |
| d | |
Hugo | Ventil |
| ... píšu šesti a v excelu zvládnu i tabulku ... tahle je rozhozená a rozpozicovaná otestujte hover v tabulkách :) | |||
| b1 | b2 | b3 | b4 | |||
| b15 | b12 frontpage | b13 | b14 | |||
| b10 | b11
|
b6 | b5 |
Na tabulky byl hodně dobrý nástroj MS frontpage
Pár tagů pro ruční psaní: TABLE = tabulka, TH = hlavička, TR = řádek, TD = buňka, nakonec si zobrazte kód a najdete komplet všechno. Závěrem někdo může tvrdit, že tabulky již skončily a jsou retro a to má pravdu, není to však jen a pouze o desingu webu a mají své uplatnění a neskončily.
no takže tady je troška magie:
caption {font-size: 18px;font-weight:bold; text-shadow: gray 2px 2px 5px;color: darkblue } table { border-width:1px;border-color:gray;border-style:doted; font-size:24px;border-spacing:0;border-collapse:collapse; } /* kdo dnes chce tabulku s dvojitou linkou */ thead { background-color: #326097; color:white; text-transform:uppercase; font-weight:bold; } /* v hlave prevadim znaky na velky barvim pismo v hlave*/ th { padding:3px; text-align:left; background-color: #326097; } td { padding: 3px; border: darkgrey solid 1px; } tr:nth-child(2n+1){ background:white; } tr:nth-child(2n){ background:white; } tr:hover{ background-color: black; cursor:pointer; color:white; }
Obsah buněk tabulky Do buňky tabulky můžete vložit úplně cokoliv. Obrázky, odstavce, ale třeba i další tabulku. Je dobré takových vnořených tabulek nedělat příliš mnoho, protože pak v tom snadno vzniká zmatek. Je možné dokonce vkládat do tabulek celé stránky a dělat tak sloupcovou sazbu. Dělat by se to ale nemělo, protože to zpomaluje zobrazování stránky.
Dvojí použití tabulek Na internetových stránkách se tabulky používají ve dvou případech: 1.Jestliže je potřeba udělat klasickou tabulku. 2.Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba).
1.Formátování buněk přidáním atributů tagu td (šířky buněk třeba) 2.Úpravou celé tabulky použitím atributu u tagu table (síla rámečku třeba) 3.Úpravou formátu obsahu buněk (barva písma třeba), to je jasné 4.Úpravou okolí tabulky (např. její vycentrování na stránce), to zde nerozvádím
Buňka (td) se šířkou 33% (ze šířky tabulky) s obrázkem na pozadí; pokud se obrázek nenajde nebo bude průhledný, bude pozadí zelenomodré (teal). Obsah se nebude zalamovat (nowrap -- to je rizikové vzhledem k nastavené šířce v procentech), rámeček bude mít základní barvu světle fialovou (#ff00ff).
Konflikt šířek V praxi se mohou dostat do konfliktu čtyři údaje a okolnosti: •Obsah buněk •Zadaná šířka všech buněk •Zadaná šířka tabulky •Šířka okna V ideálním případě spolu šířky nekolidují. To je když součet šířek buněk je rovný nastavené šířce tabulky, žádná buňka nemá extrémně široký obsah a okno je širší než tabulka. Tento ideální případ je velmi řídký. V praxi nastává celá škála možných nerovností.
caption {font-size: 18px;font-weight:bold; text-shadow: gray 2px 2px 5px;color: darkblue } table { border-width:1px;border-color:gray;border-style:doted; font-size:24px;border-spacing:0;border-collapse:collapse; } /* kdo dnes chce tabulku s dvojitou linkou */ thead { background-color: #326097; color:white; text-transform:uppercase; font-weight:bold; } /* v hlave prevadim znaky na velky barvim pismo v hlave*/ th { padding:3px; text-align:left; background-color: #326097; } td { padding: 3px; border: darkgrey solid 1px; } tr:nth-child(2n+1){ background:white; } tr:nth-child(2n){ background:white; } tr:hover{ background-color: black; cursor:pointer; color:white; }
Obsah buněk tabulky Do buňky tabulky můžete vložit úplně cokoliv. Obrázky, odstavce, ale třeba i další tabulku. Je dobré takových vnořených tabulek nedělat příliš mnoho, protože pak v tom snadno vzniká zmatek. Je možné dokonce vkládat do tabulek celé stránky a dělat tak sloupcovou sazbu. Dělat by se to ale nemělo, protože to zpomaluje zobrazování stránky.
Dvojí použití tabulek Na internetových stránkách se tabulky používají ve dvou případech: 1.Jestliže je potřeba udělat klasickou tabulku. 2.Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba).
1.Formátování buněk přidáním atributů tagu td (šířky buněk třeba) 2.Úpravou celé tabulky použitím atributu u tagu table (síla rámečku třeba) 3.Úpravou formátu obsahu buněk (barva písma třeba), to je jasné 4.Úpravou okolí tabulky (např. její vycentrování na stránce), to zde nerozvádím
Buňka (td) se šířkou 33% (ze šířky tabulky) s obrázkem na pozadí; pokud se obrázek nenajde nebo bude průhledný, bude pozadí zelenomodré (teal). Obsah se nebude zalamovat (nowrap -- to je rizikové vzhledem k nastavené šířce v procentech), rámeček bude mít základní barvu světle fialovou (#ff00ff).
Konflikt šířek V praxi se mohou dostat do konfliktu čtyři údaje a okolnosti: •Obsah buněk •Zadaná šířka všech buněk •Zadaná šířka tabulky •Šířka okna V ideálním případě spolu šířky nekolidují. To je když součet šířek buněk je rovný nastavené šířce tabulky, žádná buňka nemá extrémně široký obsah a okno je širší než tabulka. Tento ideální případ je velmi řídký. V praxi nastává celá škála možných nerovností.