Tabulky a odkazy
Vytvoření tabulky
Pomocí značky <table> v ní jednu nebo více značek <tr>, definující řádky v ní jednu nebo více značek <td>, definující buňky
<table>
<tr>
<td>buňka
1</td>
<td>buňka
2</td>
</tr>
</table>
V takto vytvořené tabulce nejsou žádné rámečky nebo
stínování. Pro zobrazení rámečku použijeme parametr border
<table border=“1“>
Určení velikosti tabulky
Ve výchozím nastavení se přizpůsobuje obsahu buněk.
Někdy, ale potřebujeme větší rozestup a ten zajistíme pomocí parametru width ve značce <table>
<table width=100%>
resp. <table style=“width:100%“>
Určení šířky sloupce
Pro nastavení šířky sloupce na určitou minimální hodnotu určíme šířku každé buňky sloupce ve značce <td>
<td width=“200“>
<td style=“width:200px“>
Sloučení buněk
Při tvorbě rozvržení stránek založeném na tabulkách můžeme využít slučování.
Pro sloučení buňky se sousedícími buňkami vpravo použijeme parametr colspan a určíme počet sloupců, přes které se buňka rozáthne.
<td colspan=“3“>
Pro sloučení buňky se sousedícími buňkami pod ní použijeme parametr rowspan a určíme počet řádků.
<td rowspan=“2“>
Rámečky tabulky
Nastavení tloušťky a barvy provádíme stejným způsobem jako u odstavců.
Vlastností border-width a border-color vlastnost
stylů border-style
A pro formátování jednotlivých stran border-top, border-bottom,
border-left nebo border-right.
Pomocí CSS můžeme taky určit, zda mají být mezi rámečky sousedních buněk mezery, nebo zda mají být rámečky zobrazeny přes sebe. Vlastnost, která to zajistí se nazývá border-collapse ve značce <table> a může nebývat hodnoty collapse nebo separate(to je výchozí hodnota)
Používání výplně pozadí a popředí
Pro použití barevného pozadí tabulky použijeme stejné pravilo s vlastností background-color, které používáme pro pozadí stránky
<tr style=“background-color:red“>
<table style=“background-image:url(3D.jpg)“>
<table style=“color:orange“>
background a její varianty
background-color
background-image nastavuje obrázek na pozadí
background-repeat nastavuje několikanásobné opakování na pozadí(repeat-x, repeat-y, no-repeat, repeat)
background-attachment nastavuje, zda se má obrázek na pozadí pohybovat při používání posuvníků, nebo nemá (fixed, scrooll)
backgrount-position nastavuje umístění obrázku na pozadí- pokud zadáme jednu hodnotu pak to platí pro vzdálenost od levého okraje. Pokud zadáme dvě hodnoty pak ta druhá hodnota platí pro vzdálenost od horního okraje. Kromě délky můžeme také použít hodnoty (left, right top, bottom, center)
Rámeček kolem prázdných buněkVlastnost empty-cells umožňuje nastavit zda se má zobrazovat rámeček kolem prázdné buňky. Pokud této vlastnosti přiřadíme hodnotu show pak se rámeček vždy objeví. Při zadání hodnoty hide se žádný rámeček neobjeví.
Zákaz zalomení řádku v buňkách
pomocí vlastnosti white-space a parametru nowrap zabráníme zalamování řádků.
<th style="white-space:nowrap"> dlouhý text </th>
Nastavení šířky tabulky nezávisle na obsahu
Vlastnost table-layout přidělujeme ji značce <table> ovlivňuje šířku tabulky. Výchozí nastavení je auto, kdy se šířka tabulky řídí podle obsahu.
Nastavíme-li hodnotu fixed, pak se šířka tabulky bude řídít hodnotou, kterou jsme zadali výrazem <table width="200">, nebo součtem šířek sloupců (colgroup), nebo součtem šířek buňěk v prvním řádku. Pokud je zadáno více hodnot, které si navzájem neodpovídají pak bude použita ta která umožňuje největší šířku tabulky.
Pokud se do takto nastevných širokých sloupců obsah nevejde a bude zakázáno zalomení, pak se obsah podle použitého prohlížeče buď ořízne a nebo bude přesahovat.
Výhodou je, že takovouto tabulku může prohlížeč okamžitě vykreslit a nemusí čekat až se načte celý obsah.
Zobrazení dlouhého obsahu pomocí posuvníků
vlastnost overflow požijeme v případě, když se text nemůže zalomit a přesahuje přes okraj nebo se nezobrazuje vůbec.
Jejími hodnotami mohou být
hidden - obsah přesahující se nezobrazí
visible - obsah přesahující se zobrazí
scroll - přesahující obsah se dá zobrazit pomocí posuvníků
auto - posuvníky se zobrazí pokud to bude nutné
Pokdu ji chceme použít musíme využít značek <div> </div> ve většině prohlížečů má však problémy s vykreslováním.Ve Firefoxu funguje.
Vytvářením odkazů pomocí
pseudotříd v CSS
Pseudotřídy :link, :active, :visited a :hover
Umožňuje nejen nastavovat barvu textů odkazů, ale i další vlastnosti odkazů, jako typ a velikost písma a jiné
a:link pro nenavštívené odkazy,
a:active pro aktivní odkazy,
a:visited pro již navštívené, ale ne právě aktivní odkazy,
a:hover pro efekty překreslení
př.a {color:red; text-decoration:none}
a:hover {text-decoration:underline}
Pseudotřída :hover
Od 4. verze Internet Explorer
existuje pseudotřída a:hover, která označuje odkaz, přes který se
zrovna přejíždí myší.
a:hover { color: orange}
v tomto příkladě budou všechny odkazy při přejíždění myší měnit barvu na oranžovou. Mozilla a další moderní prohlížeče to umějí také.
Barva není jediná věc, která se dá u odkazů měnit. Obzvlášť hezky vypadá,
když se nadeklaruje barva pozadí, vnitřní okraj (padding) a rámeček
(border).