Účel lekce: Seznámení s vlastnostmi tabulky a principy rozložení tabulky CSS
Podívejme se na základní vlastnosti tabulky CSS
okraj
Vlastnost je považována za jednu a zahrnuje několik vlastností současně:
- HRANICOVÝ STYL
- ŠÍŘKA HRANICE
- BORDER-COLOR
Existuje také kolektivní pravidlo:
table.collapse (border-collapse: collapse;) table.separate (border-collapse: separate;)
Výsledek:
šířka a výška
(výška a šířka stolu)
Hodnoty:
Příklad:
zarovnání textu
(horizontální zarovnání)
Hodnoty:
- střed (na střed)
- vlevo (zarovnáno doleva)
- vpravo (zarovnáno vpravo)
- zarovnat (šířka)
vertikální zarovnání
(vertikální zarovnání)
Hodnoty:
- základní linie (základní linie)
- sub (jako subindex)
- super (jako horní index)
- nahoře (nahoře)
- uprostřed (uprostřed)
- dole (dole)
- % (z výšky řádkování)
Příklad:
polstrování
(polstrování stolu)
barva pozadí (pozadí)
barva (barva textu)
Rozložení tabulky CSS
Vzhledem k velkému počtu vlastností tabulek a variací v jejich designu jsou tabulky již dlouhou dobu standardem pro rozvržení webových stránek. Pokud zneviditelníte okraje tabulky, můžete její jednotlivé buňky použít jako samostatné bloky stránky: záhlaví, nabídka, zápatí atd.
To ale není úplně správné, protože každá značka má svůj vlastní účel a tabulky neměly sloužit k rozvržení stránky. Nedostatek alternativy však přiměl návrháře použít tento typ metody rozložení.
Nyní existuje další způsob - pomocí vrstev, které postupně nahradily tabulky v tomto druhu práce s webovou stránkou. Někteří designéři však i v dnešní době úspěšně používají rozložení tabulky.
Rozložení tabulky se dvěma sloupci
Jednou z nejběžnějších metod rozložení jsou dva sloupce, tj. stránka je rozdělena na dvě části.
Příklad: nastavte hlavní rámec stránky do dvou sloupců: první - s pevnou velikostí, druhý - pro zbytek oblasti prohlížeče. Proveďte úlohu pomocí stylů CSS ()
Výkon:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "vpravo"> 2</ td> </ tr> </ tabulka> ... |
| 1 | 2 |
Výsledek:
Příklad: nastavit jiné pozadí buněk (oddělit dva sloupce od sebe) a nastavit vzdálenost mezi sloupci (oddělovač)
Výkon:
Pojďme přidat nové vlastnosti stylu:
/ * pro levou buňku * / td # vlevo (šířka: 200px; pozadí: #ccc; ohraničení: 1px plná černá; / * dočasně označuje okraje * /) / * pro pravou buňku * / td # vpravo (pozadí: # fc3; ohraničení: 1px plná černá; / * dočasně označuje okraje * /) / * pro oddělovač * / #razdel (šířka: 10px; / * Mezery mezi sloupci * /)
Spolu:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "razdel"> <td id = "vpravo"> 2</ td> </ tr> </ tabulka> |
| 1 | 2 |
Pro oddělovač byla přidána nová buňka.
Výsledek:
Příklad: vytvořte oddělovač mezi sloupci tabulky pomocí přerušovaného okraje sousedních buněk
Výkon:
Přidejme nové vlastnosti ohraničení pro buňky:
/ * pro levou buňku * / td # vlevo (šířka: 200px; pozadí: #ccc; / * Barva pozadí levého sloupce * / / * nová * / border-right: 1px přerušovaná # 000; / * Možnosti přerušované hranice vpravo * / )
Spolu:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "vpravo"> 2</ td> </ tr> </ tabulka> |
| 1 | 2 |
Výsledek:
Rozložení tabulky se třemi sloupci
Existuje koncept pevného nebo „tekutého“ rozložení.
Opravené CSS rozvržení
- Použitím pevné rozložení šířka celé tabulky je nastavena v pixelech, a potom, bez ohledu na rozlišení okna monitoru a prohlížeče, bude mít tabulka vždy stejnou šířku.
- V tomto případě šířka zbývajících sloupců by měla být také stanovena.
- Je možné neurčit šířku jedné buňky, poté se vypočítá automaticky na základě rozměrů zbývajících buněk a celé tabulky.
Příklad: vytvořte šablonu stránky se třemi sloupci. Použít pevné rozložení tabulky:
- levý sloupec - 150 pixelů;
- střední sloupec - 400 pixelů;
Výkon:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "centrální"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ tabulka> |
| 1 | 2 | 3 |
Výsledek:
Gumová maketa
- Šířka stolu při použití „gumového“ provedení nastaveno v% šířky okna prohlížeče... Že. když se změní okno prohlížeče, změní se také velikost tabulky.
- Šířka všech buněk lze nainstalovat v procentech.
- Druhá možnost je kdy šířka některých buněk Je založena v procentech, a některé v pixelech.
Důležité: Součet šířek všech sloupců by měl být 100%, bez ohledu na šířku tabulky.
Příklad:
- levý sloupec - 20%;
- střední sloupec - 40%;
- pravý sloupec - 40%;
Nastavte pozadí sloupců a sloupce vizuálně oddělte ohraničením.
Výkon:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "centrální"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ tabulka> |
| 1 | 2 | 3 |
Výsledek:
Zvažte druhou možnost, když je šířka středového sloupce automaticky vybrána prohlížečem; příkladem je obrázek: 
Příklad: vytvořte šablonu stránky se třemi sloupci. Použijte rozvržení tabulky tekutin:
- levý sloupec - 150 pixelů;
- střední sloupec - 40%;
- pravý sloupec - 200 pixelů;
Nastavte pozadí sloupců a sloupce vizuálně oddělte ohraničením.
Výkon:
| </ hlava> <tělo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vlevo"> 1</ td> <td id = "centrální"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ tabulka> |
| 1 | 2 | 3 |
Výsledek:
Výsledek bude přibližně stejný, pouze dojde k „roztažení“ díky centrálnímu sloupku.
Použití vnořené tabulky v tekutém rozložení
Pokud je šířka dvou sloupců nastavena v procentech a třetí v pixelech, s jednou tabulkou se neobejdete. Pokud je tedy šířka celé tabulky 100 procent, první sloupec je 200 pixelů a zbývající sloupce jsou 20 procent, pak jednoduchý výpočet ukazuje, že velikost prvního sloupce je 60 procent. V tomto případě prohlížeč nepřijme zadanou hodnotu v pixelech a velikost bude nastavena v procentech. 
- Původní tabulka je vytvořena se dvěma buňkami. Šířka stolu je nastavena v procentech.
- Pro levou buňku(první sloupec) je nastavena šířka v pixelech.
- Šířka pravé buňky(základna pro ostatní reproduktory) nespecifikováno... Do této buňky je vložena druhá tabulka, která se také skládá ze dvou buněk.
- Šířka buněk vnořené tabulky je nastavena v procentech..
- Šířku vnitřní tabulky je třeba nastavit na 100 procent aby tato tabulka zabírala veškerý volný prostor ve vnější tabulce.
- Šířky středového a pravého sloupce se počítají relativně k šířce buňky, nikoli k vnější tabulce jako celku.
Příklad: vytvořte šablonu stránky se třemi sloupci. Použít tekuté rozložení s vnořenou tabulkou:
- levý sloupec - 150 pixelů;
- střední sloupec - 60%;
- pravý sloupec - 40%;
Nastavte pozadí sloupců.
Výkon:
Atributy tagu cellpadding a cellspacing jsou zde povinné, aby mezi tabulkami nebyla žádná „mezera“. Určuje vzdálenost mezi okraji buněk v tabulce. Atribut border-spacing nefunguje, pokud je v tabulce nastaveno sbalení ohraničení. Syntaxmezery mezi okraji: hodnota [hodnota] ArgumentyJedna hodnota nastavuje svislou i vodorovnou vzdálenost mezi okraji buňky. Pokud existují dva argumenty, první definuje horizontální vzdálenost a druhý vertikální vzdálenost.
Výsledek tohoto příkladu je znázorněn na obr. 1.
Rýže. 1. Použití parametru mezer mezi řádky PoznámkaPokud tag
|
