Vytvoření tabulky v HTML

V tabulkách je vhodné umístit data v kombinaci s některými závislostmi. Pro vytváření tabulek ve formátu HTML se používají speciální značky HTML. S jejich pomocí můžete sestavit tabulku jakékoliv složitosti. Kromě toho je praktické uspořádání tabulek velmi běžné, což vám umožní krásně a pohodlně umístit prvky na webové stránce.

Vytvoření první tabulky

Otevřete textový editor jako obvykle, vytvořte prázdný soubor HTML a vložte mezi tyto značky následující kód:

  1 
  2 
  3 
  4 
  5 
  6 

Uložte dokument. Otevřete soubor. Pokud se nikde neobjeví žádné překlepy, prohlížeč vytvoří následující výsledek:

Řekněme kód popsaný takto:

1. Tagy oznamte prohlížeči, že je nutné vytvořit tabulku.
2. Atribut ohraničení definuje hranice tabulky a parametr 1 jejich tloušťku v pixelech.
3. S pomocí nastavte řádky tabulky.
4. Počet značek určuje počet sloupců.
5. Čísla mezi značkami jsou obsahy buněk.

Chcete-li ponechat prázdnou buňku, měli byste v ní napsat nějaký neviditelný znak, například mezeru, a neopustit jej bez jakéhokoli obsahu. To je nezbytné pro správné zobrazení prázdné buňky všemi prohlížeči. Některé z nich mohou výsledek zkreslit, pokud se tak nestane.

Obsah článků může být absolutně libovolný element HTML: čísla, text, obrázky, samotné tabulky a dokonce i celé stránky. Hlavní věc zde není jen vědět, jak vytvořit tabulku v HTML, ale také pozorovat hnízdění značek.

Nastavte velikost

Výše uvedený příklad dává malý stůl, který je nevhodný pro vizuální vnímání. Velikost tabulky můžete upravit na požadované parametry pomocí dvou atributů:

1. šířka - nastavuje šířku.
2. výška - nastavuje výšku.

Hodnoty těchto atributů mohou být pixely nebo procenty. Některé prohlížeče nefungují správně s procenty týkajícími se atributu height. Proto byste měli kód vyzkoušet v několika nejběžnějších oblastech:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

Pokud je displej nesprávný, stojí za změnu hodnoty výšky tabulky v procentech na hodnotu v pixelech. Volba ve prospěch pixelů může být také provedena na základě toho, že návštěvník vašeho webu může přijít ze zařízení, které má malý monitor (mobilní telefon). Text v tabulce HTML na monitoru telefonu bude nastaven na velikost. A pokud jsou nastaveny procenta, bude tabulka tak malá, že nebude možné ji přečíst.

Pomocí atributů šířky a výšky nastavíme rozměry: šířka HTML tabulky je 300 a výška je 200 pixelů:

  1 
  2 
  3 
  4 
  5 
  6 

V důsledku toho prohlížeč zobrazí tabulku s potřebnými rozměry:

Umístění

Význam této akce spočívá v nalezení obsahu buněk a umístění samotné tabulky na webové stránce. Technologie HTML v tabulkách umístěných na webové stránce je však omezena na umístění vlevo (ve výchozím nastavení), v centru a vpravo pomocí atributu align a potřebných hodnot:

Syntaxe je:

  ... 

V budoucnosti, když se učíte o technologii CSS, se naučíte, jak umístit prvky webových dokumentů vertikálně.

Chcete-li nastavit umístění obsahu buňky, použijí se ke značce stejné atributy se stejnými hodnotami. :

  ...   ... 
  obsah buněk 

Umístěte náš stůl doprava a zarovnejte obsah jeho buněk uprostřed:

  1 
  2 
  3 
  4 
  5 
  6 

Výsledkem by mělo být toto:

Zřetězení řetězce

Chcete-li vytvořit více buněk řádku v jedné buňce, použije se atribut colspan s hodnotou rovnou počtu buněk, které mají být sloučeny. V kódu jsou odstraněny následující značky. spolu s jejich obsahem. Počet značek, které chcete smazat rovnající se hodnotě atributu colspan mínus jedna.

Zvažte toto pravidlo příkladem. Předpokládejme, že potřebujete vytvořit tabulku ve středu stránky s libovolnými čísly velikosti 4 sloupce a 3 řádky. Potom sloučit buňky 2 a 3 vodorovně ve druhém řádku tak, aby prohlížeč produkoval následující výsledek:

Následující kód implementuje tuto tabulku do webového dokumentu:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Všimněte si kód HTML v tabulce, kde jsou dvě buňky kombinovány:

  58   36   80 

Protože hodnota parametru colspan je 2, 1 tag byl smazán. (2 - 1 = 1) s celým obsahem. Pokud by bylo nutné spojit tři buňky, pak by byly odstraněny 2 značky. .

Připojte sloupce

Vertikální buňky jsou kombinovány pomocí atributu rowspan. Jeho číselná hodnota určuje počet buněk, které mají být řezány vertikálně. Toto téma představuje pro studenty největší potíže.

Následující metoda je nejjednodušší pochopit: vytvořte tabulku a zadejte čísla s různými čísly. Například:

Kód tabulky bude následující:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Zbavíme se dvoumístných čísel kombinací sloupců s čísly 6 a 10, 7 a 11, 8 a 12. Čísla ponechte ve vertikálně kombinovaných buňkách: 6, 7 a 8.

Kombinujte 6 a 10. Ve značce obsahující číslo 6, předepište: a strukturu 10 odstranit vůbec. Stejně tak musíte udělat pro zbývající dvojice čísel. V důsledku toho se kód změní takto:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Prohlížeč by měl vytvořit tabulku, kterou potřebujeme:

Tip: dokud nedosáhnete automatické akce při sloučení sloupců, použijte tuto metodu pomocí čísel a nahraďte je požadovanými údaji.

Obsah buňky

Jak bylo uvedeno výše, elementy buněk mohou být libovolné prvky HTML. Například v tabulce bude snadná realizace jednoduché tabulky ovoce a květů:

Jak můžete vidět, buňky v této tabulce obsahují text, obrázky a barvu pozadí. Používají se elementy buňky a všechny značky HTML budou fungovat. Tabulka může obsahovat také hypertextové odkazy ve všech svých formách (text, odkazy na obrázky atd.).

Je zvláště nutné stanovit plnění buněk barvou: protože jsou prázdné, neobsahují žádné údaje, je třeba zaregistrovat prázdný prostor: . V takovém případě nemusí šířka článku odpovídat požadované šířce. A téměř vždy se to stane. V tomto případě na tuto značku Atribut šířky se používá s požadovanou hodnotou: .

Pro správné zobrazení barvy aplikované na text nebo pozadí jsou v HTML k dispozici tzv. Bezpečné barvy. Tabulku jejich kódů lze nalézt na mnoha místech. Bezpečná barva HTML neznamená, že může poškodit počítač, ale znamená, že bude zobrazen na konzoli návštěvníka vašeho budoucího webu stejně, jak jste zamýšlel, bez zkreslení.

Záhlaví tabulky

Často je potřeba uvažovat o tabulce. To se provádí pomocí speciální párové značky. . Je umístěn bezprostředně za značkou.

V prohlížeči bude tato tabulka vypadat takto:

Kromě názvů tabulek použijte názvy sloupců nebo řádků pomocí značky. . Text v tabulce HTML uzavřené mezi těmito značkami bude zobrazen tučně. K této značce použijeme atribut sloučení atributu horizontální. Projděte si výše uvedenou tabulku jako příklad a proveďte změny kódu:

  Tabulka s čísly 
  Dokonce 
  Odd 
  2 
  1 
  4 
  3 
  6 
  5 

V důsledku toho bude prohlížeč zobrazovat záhlaví se záhlaví sloupce:

Chcete-li vytvářet boční záhlaví, když jsou prvky určitého sloupce, použijte značku umístěné těsně za značkou před první značkou .

Webový plán rozvržení tabulky

To je nejběžnější způsob, jak vytvořit webové stránky. Podstatou rozvržení tabulky je umístit prvky na stránce stránky v buňkách pomocí tabulek. Zároveň jsou odebírány oddělené části místa (zápatí, hlavička, tělo), což může být také buňkami. V praxi se tabulkové uspořádání provádí ve většině případů podle následujícího algoritmu:

• webdesigner připraví rozvržení webu;
• pomocí grafických editorů nebo jiného softwaru se jednotlivé prvky rozvržení (tlačítka, obrázky) oddělují a stávají se nezávislými;
• webový programátor vytvoří tabulku prvků místa, jak ji zamýšlí návrhář, čímž zůstane prázdná;
• webový programátor znovu vytvoří obraz stránek z řezných prvků pomocí značkových a webových programovacích jazyků, monitoruje funkčnost a funkčnost každého z nich.

Rozložení tabulky webu vám umožní krásně a logicky vytvořit obsah (obsah), aby poskytl návštěvníkům, kteří ho navštívili. Má však dvě minuty:

1. Vyžaduje velké množství kódu.
2. Je to místo těžší a snižuje rychlost jeho nakládání.

Ale někdy, aby se splnily technické úkoly s přísným umístěním prvků, je HTML layout v tabulce jediným řešením.