Jak vytvořit tabulku v HTML: podrobný popis

Tabulky jsou jedním z nejdůležitějších, ale zároveň složitých prvků, které musí být na webových stránkách. S jejich pomocí je vhodné předložit důležité a užitečné informace v poměrně stručné podobě. Samozřejmě, že většina editorů v šablonách, pracující na různých motorů, automaticky vložit tabulku do svých webových stránek nebo samostatné publikaci, ale co když navrhování zdroj webových aplikací, její stránky jsou vytvořeny od nuly? Pak před začátečníkem může být problém: jak to udělat tabulka v HTML.

Vyberte editor

Za prvé, při vytváření tabulky byste měli určit editor, ve kterém budete pracovat. Samozřejmě nejjednodušší způsob, jak zvolit program, ve kterém vytvoříte hlavní kód webu. Ale je nejlepší použít starý dobrý notebook pro tyto účely.

Možná se ptáte, proč komplikovat život, protože pokud uděláte vše přímo v editoru, pak výsledek může být viděn okamžitě, taky, a dokonce vyzve program používat.

Ano, to je pravda, ale k vytvoření tabulky od nuly, budete moci nejen důkladně prozkoumat princip jejího vzniku, ale také aby se zabránilo trapné překlepy a chyby v podkladové kódu. Někdy se to stane náhodou, že kurzor se pohybuje dolů, a proces psaní kódu omylem plíží dovnitř, což je někdy obtížné najít. Vytvoření tabulky v notebooku můžete zkopírovat kód a vložit jej na požadované místo.

Algoritmus pro vytvoření tabulky

Nejprve sestavíme krátký algoritmus, jak vytvořit tabulku v HTML. To je nezbytné, abyste pochopili postup každého kroku. Pak budeme analyzovat, jak provádět jednotlivé položky.

Začněme přípravnými akcemi.

1. Nakreslete schéma tabulky na list papíru.

2. Počítat počet řádků a buněk. Pokud je číslo posledního odlišné - pro každý řádek zvážíme samostatně.

3. Určete počet buněk v hlavičkách řádků (například buňky "Ne", "Jméno" atd.).

4. Zaznamenejte hlavní parametry tabulky - barvu, výšku a šířku, zarovnání textu - obecně vše, co potřebujete.

Poté přejděte přímo k vytvoření tabulky:

1. Vložte značky tabulky.

2. Vložte značky řádků na základě potřebné částky.

3. Řádky vložit tagy buněk (normální a velká), také na základě množství, které se zaznamenaný na papíře.

4. Nastavte parametry pro tabulku jako celek.

5. V případě potřeby nastavíme indikátory pro jednotlivé buňky.

6. Naplňte buňky textu.

Vytvořte tabulku

Takže vy jste vybrali redaktora, teď pojďme zjistit, jak vytvořit tabulku v HTML. Značka, která vloží tabulku do kódu stránky (

Vložením značek tabulky pokračujeme k vytváření řádků a buněk.

Okamžitě konstatujeme, že tyto prvky jsou také spárovány. Tag nastavuje řádky a - buněk.

U buněk hlavičky použijte párovaný prvek .

Jak již bylo řečeno, je třeba nejdříve vydat řádky, pak v nich zaregistrovat buňky. Aby nedošlo k záměně, doporučujeme, abyste mezi jednotlivými bloky vytvořili buď odsazení mezi dvěma řádky nebo předepsat nový blok prvků pomocí tlačítka "Tab".

Jak to může vypadat? Přibližně:

• ;
• ;
• № п / п ;
• Příjmení ;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

Jak vidíte, v tom není nic komplikovaného. Nejdůležitější věcí není zaměňovat se počtem řádků a buněk. V opačném případě může být tabulka zkosená.

Diskutovali jsme o vytvoření tabulky v HTML, nyní můžeme přejít na parametry samotné matice a jejích řádků a buněk.

Možnosti tabulky

Při psaní kódu je třeba poznamenat následující body: zarovnání v HTML tabulka, barva okraje, pozadí, text a tak dále.

Parametry tabulky jsou nastaveny ve značce

1. Hranice - šířka hranic. Je dáno jako celé číslo. Ve výchozím nastavení jsou hranice libovolné tabulky nulové.

2. Bordercolor - barva ohraničení. Může být zadán jako hexadecimální barevný kód (# 00008B) a jeho název v angličtině (DarkBlue). Ve výchozím nastavení je vždy šedá.

3. Bgcolor - barvu pozadí. Nastavení také podle kódu nebo názvu.

4. Zarovnat - zarovnejte text za tabulkou. Výchozí hodnota je vlevo. Pro tento parametr jsou k dispozici následující možnosti:

• vlevo je tok vpravo;
• pravý tok doleva;
• center - výstup stolu ve středu bez průtoku.

5. Šířka a výška - šířka a výška stolu. Lze zadat v pixelech i v procentech (relativně k velikosti okna prohlížeče).

Předepisování tohoto nebo tohoto indikátoru byste měli věnovat zvláštní pozornost návrhu. Po zadání parametru musí být dodržen rovnocenný znak, za ním následuje zadaná hodnota v uvozovkách.

Pokud jde o barvu textu, je navržena stejným způsobem jako prostý text ve formátu HTML.

Příklad tabulky:

• ;
• ;
• № п / п;
• Příjmení;
• ;
• ;
• 1;
• Ivanov;
• ;
• .

Parametry linky

Takže jsme již zjistili, jak vytvořit tabulku v HTML a předepsat její základní parametry. Ale co když musíme vybrat linku? Chcete jej navrhnout jako hlavní text tabulky?

Parametry řetězce jsou zapsány do tagu stejně jako údaje v tabulce. Pro řetězec lze zadat následující proměnné:

1. Už jste znám hranici, bordercolor a bgcolor.

2. Zarovnat - zarovnejte text v řádku. Může mít hodnoty vlevo, vpravo a vpravo.

3. Valign - tato značka zarovná text vertikálně. Vykazují následující hodnoty:

• horní - text je zarovnán na horní hranici;
• střední - střed;
• spodní - dolní okraj.

Příklad řádku:

• ;
• № п / п;
• Příjmení;
• .

Nastavení buňky

A poslední věc, kterou byste měli dávat pozor na ty, kteří chtějí vědět, jak vytvořit tabulku v HTML - parametry jednotlivých buněk, a to jak normální a kapitál. Ve skutečnosti se vše dělá přesně stejným způsobem jako u tabulky nebo řady. Jediná věc je doplněna dvěma důležitými prvky:

1. Colspan - tento parametr určuje počet sloupců, které buňka může spadat.

2. Řádek - určuje počet řádků, které tato buňka zaujímá.

Vzhledem k tomu, že návrh se neliší od psaní řádku, neuvedeme vám příklad kódu.

Závěry

Vytvoření tabulky není tak obtížné, jak by se na první pohled mohlo zdát. Hlavní věc při psaní jejího kódu je důvěra a pozornost.

Pokud jde o vložení tabulky do HTML, je její šifra zkopírována a vložena přesně na místo vaší stránky, ve které by se podle vašeho názoru mělo nacházet.

Nebojte se experimentovat a brzy budete ovládat techniku ​​vytváření tabulek. Hodně štěstí!