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ě, většina redaktorů v šablonách běžících na různých strojích vám umožňuje automaticky vložit tabulku na stránku webu nebo samostatné publikace, ale co když návrh webového zdroje, jeho stránky jsou vytvořeny od nuly? Pak před spuštěním průvodce může být problém: jak vytvořit tabulku v HTML. Zjistíme, jak tento prvek správně a rychle vytvořit.
Vyberte editor
Nejprve, když začnete vytvářet tabulku, měli byste 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.
Můžete se zeptat, proč se váš život zkomplikuje, protože pokud děláte všechno najednou v editoru, můžete vidět výsledek také a můžete také použít výzvy programu.
Ano, je to pravda, ale když vytvoříte tabulku od nuly, budete nejen schopni důkladně prostudovat samotný princip svého vytvoření, ale také vyhnout se otravným chybám a chybám v hlavním kódu. Někdy se stává, že se kurzor náhodně pohybuje dolů a v průběhu psaní kódu se hýbe v chybě, což je někdy obtížné najít. Když vytvoříte tabulku v programu Poznámkový blok, můžete zkopírovat její šifru a vložit ji na požadované místo.
Algoritmus pro vytvoření tabulky
Nejprve vytvoříme krátký algoritmus pro vytvoření tabulky v jazyce HTML. To je nezbytné, abyste pochopili postup každého kroku. Potom budeme analyzovat, jak provést každou položku.
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é - považujeme za každý řádek samostatně.
3. Určete počet buněk v hlavičkách řádků (například buňky "Ne", "Název" atd.).
4. Zaznamenáváme hlavní parametry tabulky - barvu, výšku a šířku, zarovnání textu - obecně vše, co potřebujete.
Dále 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. V řádcích vložte značky buňky (pravidelné a kapitálové) také na základě množství, které je na vašem papíru napsáno.
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 textem.
Vytvořte tabulku
Takže vy jste vybrali editor, teď pojďme zjistit, jak vytvořit tabulku v HTML. Značka, se kterou je tabulka vložena do kódu stránky (
), je dvojice, tj. Náš návrh začíná tímto označením a končí pomocí .
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. Značka
určuje řádky a | buňky.
Pro buňky záhlaví použijte párový element | .
Jak již bylo řečeno, je třeba nejdříve vydat řádky a pak v nich zaregistrovat buňky. Abychom se nemuseli zmást, doporučujeme, abyste mezi jednotlivými bloky vložili buď jeden nebo dva řádky, nebo předepsal nový blok prvků pomocí tlačítka "Tab".
Jak to může vypadat? Přibližně:
-
; -
; -
Ne. P / p ; -
Příjmení ; - ;
-
; -
| 1 | ; -
Ivanov ; - ;
- .
Jak vidíte, v tom není nic komplikovaného. Nejdůležitější věcí není zaměnit se na počet řá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 Když je kód napsán, měli byste věnovat pozornost následujícím položkám: zarovnání v tabulce HTML, barvu ohraničení, pozadí, text a tak dále.
Parametry tabulky jsou zadány v tagu . Patří sem:
1. Hranice - šířka hranic. Je dáno jako celé číslo. Ve výchozím nastavení jsou hranice libovolné tabulky nulové.
2. Bordercolor - barva hranice. Lze zadat 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 - barva pozadí. Určeno také pomocí 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;
- Centrum - zobrazí tabulku ve středu bez průtoku.
5. Šířka a výška - šířka a výška stolu. Může být zadán jak v pixelech, tak 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 za rovným znaménkem uvedena 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:
-
; -
; -
Ne. P / p ; -
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 řadu? Chcete jej navrhnout jako hlavní text tabulky?
Parametry řetězce jsou zapsány do tagu | stejným způsobem jako údaje tabulky. 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 levé, středové a pravé.
3. Valign - tato značka zarovná text vertikálně. Vezme následující hodnoty:
- Horní - text je zarovnán na horní hranici;
- Středně orientovaný;
- Spodní - dolní okraj.
Příklad řádku:
-
-
Ne. P / p ; -
Příjmení ; - .
Nastavení buňky A poslední věc, která by měla být věnována pozornost těm, kteří chtějí vědět, jak vytvořit tabulku v HTML, jsou parametry jednotlivých buněk, konvenčních i záhlaví. Ve skutečnosti se vše dělá přesně stejným způsobem jako u tabulky nebo řady. Jediná věc, dvě další důležité prvky jsou přidány:
1. Colspan - tento parametr určuje počet sloupců, které buňka může spadat.
2. Rowspan - 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í stolu není tak obtížné, jak by se mohlo na první pohled zdát. Hlavní věc při psaní jejího kódu - pečlivost a pozornost.
Pokud jde o vložení tabulky do HTML, její šifra je 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 zvládnete techniku vytváření tabulek. Hodně štěstí!
| |
| | |
| | | |
|