S pomocí CSS můžete změnit vzhled a vlastnosti tabulky. Před CSS úpravami je třeba se seznámit s HTML kódem tabulky, kde jsou jednotlivé znaky používány k určení upravovaného prvku. Než přejdeme k vytvoření stylu, je důležité si uvědomit, zda si přejete změny použít pro všechny tabulky na webu, nebo jen pro některé. V prvním případě se v zápise stylu použije znak table. V druhém případě se pak použije vlastní styl (třída) nazvaný např. Tabulka a její prvky ve výchozím nastavení nemají žádné ohraničení, odsazení, podbarvení a pod. Veškeré níže uvedené styly stačí zkopírovat a vložit do vlastních CSS stylů. Pak již jen upravit dle vlastní potřeby. Uvedené příklady je možné kombinovat, jak je na náhledových tabulkách vidět. V našem příkladě jsme tabulce nastavili šířku 100%, takže se roztáhne po celé šířce obsahové části webu.
Pro zachování responsivního chování zadávejte vždy šířku v procentech do maximální šířky 100%, aby nepřesahovala obsahovou část webu. Ve výchozím nastavení mají buňky v tabulce mezi sebou rozestupy, které zrušíme vlastností border-collapse. Tabulce jsme nastavili ohraničení, barvu pozadí, velikost a barvu písma. Dále si upravíme vlastnosti buněk tabulky. V příkladu můžete vidět obměnu zapsané vlastnosti border, kde vidíte že lze nastavit barvu každé jedné straně buňky. V náhledové tabulce je ukázán rozestup mezi buňkami s vlastností border-collapse:separate. Hlavička tabulky se používá pro nadepsání sloupců. Jestliže je vaše tabulka rozsáhlá je vhodné rozlišit řádky např. Další vychytávkou je změna pozadí řádku tabulky při přejetí kurzorem myši. Usnadňuje sledování řádku. Tento styl vždy uvádějte ve vlastních CSS stylech pod výše uvedeným. V tabulce jsou popsány použité vlastnosti. Většina je použitelných i při stylování jiných prvků. Každý tvůrce webových stránek, který chce, aby jeho stránka vypadala dobře, se při práci rozhodně neobejde bez použití tabulek.
Zavedení tabulek jako základního stavebního prvku stránky se ukázalo jako velmi prozíravé. Začaly vznikat weby, které měly obsah zalomený do několika sloupců, začaly vznikat weby se specifickým layoutem apod. Při tvorbě tabulek mějte na zřetel jedno základní pravidlo - tabulka se v prohlížeči zobrazí, až se načte úplně do konce. Pokud váš web tvoří pouze jedna velká tabulka, kde je umístněn veškerý obsah, stránka se zobrazí až po načtení tohoto obsahu. Pokud stránku rozdělíte např. do dvou nevnořených tabulek umístěných pod sebou, první se návštěvníkovi zobrazí horní tabulka a za nějakou dobu dolní tabulka.
První část textu. Průběžné zobrazování načtených tabulek ovšem nefunguje v případě, že je máte vnořeny do jiné, nadřazené tabulky. Občas při tvorbě tabulek vzniknou prázdné buňky, které nemají žádný obsah. V Internet Exploreru je jejich zobrazování a formátování naprosto bez problémů. Ačkoli je ve specifikaci HTML definováno, že pokud v tabulce není uveden parametr BORDER, má být orámování tabulky nulové, Netscape Navigátor razí vlastní řešení a v takovém případě je kolem tabulky uvedeno neviditelně orámování o velikosti dvou bodů, což může v případě přesně definovaných rozměrů tabulek působit problémy. Pokud v tabulce zadáte orámování o velikosti jednoho pixelu pomocí parametru BORDER=“1“, orámování tabulky je dvoupixelové. Jde to vyřešit tak, že tabulku, kterou potřebujete orámovat vložíte do nadřazené tabulky a zde v parametru BGCOLOR nastavíte barvu, kterou chcete mít tabulku orámovanou. Poté ve vnořené tabulce nastavíte vnější okraje buňky CELLSPACING=“1″ a buňky tabulky vyplníte bílou barvou. Pokud vám není příliš jasné, proč to tak je, zkusím to vysvětlit. Pomocí BGCOLOR=“BLACK“ jsme nastavili černou barvu nadřazené tabulky. Skutečně jednopixelového orámování tabulky pak dosáhneme parametrem CELLSPACING=“1″, který nastavuje prostor mezi jednotlivými buňkami tabulky. A pak stačí pomocí parametru BGCOLOR=“barva“, který je umístněn v buňkách vnořené tabulky „přebít“ onu černou barvu nadřazené tabulky. Pokud bychom dali parametr BGCOLOR=“barva“ do vnořené tabulky a nikoli do jednotlivých buněk, žádné orámování by se neobjevilo.
Více o této problematice pojednává tento článek. Pokud chcete mít text v tabulce zobrazen konkrétním písmem, musíte definici písma vkládat do každé buňky tabulky, což v případě rozsáhlých tabulek podstatně prodlužuje výslednou délku strany. Řešením jsou kaskádové styly. Pokud se vám nechce psát do každé buňky CLASS=“nazev_stylu“, jednoduše předefinujte pomocí stylů celý tag
Tabulky jsou objekt jako každý jiný a tak je možné například zarovnat dvě nevnořené tabulky vedle sebe. Výhodu to má tu, že při načítání stránky se první zobrazí ta, co má kratší délku (obsah) a poté až ta druhá. Výhoda tohoto způsobu použití je jasná - při načítání stránky se jako první např. objeví navigace webu umístněná v levé tabulce a až poté např. seznam článků v tabulce pravé. Při zadávání rozměrů tabulek můžete použít přímo číselnou hodnotu, např. WIDTH=“120″ nebo procentuální hodnotu, např. WIDTH=“50%“. Prohlížeč v tomto případě určí velikost tabulky podle velikosti okna. Tyto možnosti nastavení jsou pochopitelné. Málokdo ovšem ví, že u tabulek je možné zadávat i výšku tabulky pomocí parametru HEIGHT=“rozměr“. Stejně jako v minulém případě je možné použít číselnou či procentuální hodnotu. Netscape ovšem na parametr HEIGHT nijak nereflektuje. Parametry WIDTH a HEIGHT jsou sice obsaženy ve specifikaci HTML 4.0, ale pouze jako deprecated (odmítnuté).
Pokud ovšem potřebujete z nějakého důvodu určit i výšku tabulky tak, aby to fungovalo ve všech prohlížečích, použijte průhledný GIF 1×1 pixel, který vložíte do buňky tabulky a dejte mu rozměry, jaké zrovna potřebujete. Jak jistě víte, pozadí buněk se definuje pomocí parametru BGCOLOR=“barva“. Hodně často ale vidím, jak třeba deset buněk v jednom řádku tabulky obsahuje desetkrát již zmiňovaný parametr BGCOLOR, čímž si tvůrce stránky sám přidělává práci a prodlužuje tak výslednou velikost kódu. Možná jste někdy potřebovali umístnit tabulku na střed monitoru - nejenom zleva a zprava, ale i seshora a zezdola nezávisle na velikosti okna. Není potřeba používat JavaScript, HTML to zvládne samo. Vytvořte tabulku, která bude mít nadefinovány rozměry WIDTH=“100%“ a HEIGHT=“100%“. Tím se tabulka roztáhne podle velikosti okna. Pak do buňky této tabulky vložte parametry ALIGN=“CENTER“ a VALIGN=“MIDDLE“, které umístní obsah buňky - našem příkladu je to další tabulka - přesně na střed. Za tento tip děkuji Martinu G. Koptovi. Tento poslední tip neberte příliš vážně, a věřím, že jej nebudete v praxi používat, protože to odporuje specifikaci, ale v tabulce nemusíte používat uzavírací tagy buňky a řádku, tedy tagy
V předešlém cvičení, Řešené úlohy k 1.-4. potřebovat. vytvářeli tabulku, např. kuchyň. elementy do řádků a sloupců. vytvořit např. katalog produktů nebo kontakty na lidi ve firmě. rozvržení celé stránky. kdy chceme uživateli zobrazit přehledně nějaká data. Vytvořme si první, jednoduchou HTML tabulku. HTML soubor tabulka.html. prázdném souboru zkusit vygenerovat pomocí napsání ! stisknutí klávesy Enter, jak jsme si již ukazovali. strukturu máme připravenou. němu až v navazujícím kurzu. jednoduchou tabulku. Soubor uložíme a otevřeme v prohlížeči. my si zde prozradíme pouze atribut border. označuje tloušťku rámečku tabulky. 0, tedy je vypnutý. pixel, abychom rámeček tabulky vůbec viděli. Tabulka může mít navíc i hlavičkový řádek, případně patičku. HTML stránky. popisuje, co hodnoty ve sloupcích znamenají. table head).
, obsahující patičku tabulky. být např. informace všech řádků tabulky. Nejlépe vše pochopíme na další ukázce. několika notebooky a jejich parametry.| ... Problematika šířky buněk a tabulek je překvapivě velmi složitá. existuje několik pravidel, podle kterých se stanovují šířky buněk a tabulek. Tabulka nemůže být užší, než nejširší obrázek v jejím obsahu. efektu platit. Tabulku můžete prostě nechat, ať si stanoví šířky sloupců sama podle obsahu. Prostě nebudete zadávat žádné šířky (zadávání popisuji dále). atributu. Buňkám a tabulce se dá předepsat šířka a výška explicitně. Atribut width se dá použít u buňky (tag | ) a u tabulky (tag
|
