Ktorá značka definuje riadok tabuľky. Atribúty a vlastnosti značiek

Táto metóda sa stala populárnou a weboví dizajnéri ju používali hlavne tabuľkové usporiadanie a dosiahli veľmi dobré výsledky.

Značky používané na zostavenie tabuľky v html

tabuľky- povinná značka, ktorá otvára a zatvára stôl
titulok- voliteľná značka označujúca názov tabuľky
th- voliteľný tag, do ktorého úvodného a záverečného tagu sa zmestí názov stĺpca. Zvyčajne tučným písmom
tr- povinný štítok, z ktorého sa linka otvára a zatvára
td- povinná značka označujúca otvorenie a zatvorenie bunky v rade

Jednoduchý príklad kódu tabuľky

html tabuľka

Názov tabuľky
1. stĺpec	Stobets 2
Text v prvej bunke	Text v druhej bunke

Zobrazí sa prehliadač

Priraďovanie tabuliek v html

Lekcia o stoloch je veľmi dôležitá! Vďaka tabuľkám môžete usporiadať nielen text, ale aj obrázky, odkazy a mnoho iného. Stôl je možné nastaviť pozadie(alebo jeho farba), zarážka, šírka, hranica A iné možnosti to jej dá krásnu vzhľad. Tabuľka – Váš prvý krok k pochopeniu vzhľad stránky! Predtým boli mnohé stránky kompletne usporiadané ako tabuľky, to znamená, že všetko, čo používateľ videl (bočné menu, horné menu, obsah), bolo obsahom buniek veľkej tabuľky.
V tejto súvislosti prejdime k atribútom, ktoré robia stôl krásnym...

Vlastnosti a parametre html tabuliek: výplň, šírka, farba pozadia, orámovanie (rámček)

o tabuľkový štítok má nasledujúce atribúty:

šírka- šírka stola. môže byť v pixeloch alebo % šírky obrazovky.
bgcolor- farba pozadia buniek tabuľky
pozadie- vyplní pozadie tabuľky vzorom
hranica- rám a okraje v tabuľke. Hrúbka sa udáva v pixeloch
čalúnenie buniek- výplň v pixeloch medzi obsahom bunky a jej vnútorným okrajom
Rovnako ako predtým, hodnota atribútu sa píše v úvodzovkách.

Zvážte použitie týchto atribútov na príklade. Ak to chcete urobiť, vytvorte tabuľku (ale už bez zriedka používaných titulkov a značiek th) a nastavte parameter atribútu hranica (hranica), šírka (šírka tabuľky, riadku alebo bunky) A bgcolor (farba bunky)

html tabuľka

V dôsledku toho sa v prehliadači zobrazí nasledujúca tabuľka

rám- atribút označujúci rám okolo stola. Existujú nasledujúce hodnoty:

Prázdno - bez rámu,
hore - iba horný rám,
dole - iba spodný rám,
hsides - iba horný a spodný rám,
vsides - len ľavé a pravé ohraničenie,
lhs - len ľavý rám,
rhs - iba pravý rám,
box - všetky štyri časti rámu.

pravidlá- atribút označujúci hranice v tabuľke medzi bunkami. Existujú nasledujúce hodnoty:

Žiadne - medzi bunkami nie sú žiadne hranice,
skupiny - hranice iba medzi skupinami riadkov a skupinami stĺpcov (budú prediskutované trochu neskôr),
riadky - len hranice medzi riadkami,
cols - len hranice medzi stĺpcami,
všetko - zobrazí všetky hranice.

Zvážte príklad kódu

html tabuľka

1. stĺpec	Stobets 2

Výsledok

Teraz sa pokúsime vytvoriť krásny stôl. Ak to chcete urobiť, začnime používať zarovnanie tabuľky. Na tento účel existujú nasledujúce už známe parametre:

zarovnať- zarovnanie tabuľky. Môže byť umiestnený vľavo (vľavo), vpravo (vpravo), v strede (v strede)
rozmiestnenie buniek- vzdialenosť medzi bunkami tabuľky. Určené v pixeloch (predvolené 0 pixelov)
čalúnenie buniek- výplň v pixeloch medzi obsahom bunky a jej vnútorným okrajom (predvolené 0 pixelov)
Zvážte príklad

html tabuľka

1. stĺpec	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca

Prehliadač zobrazí tabuľku zarovnanú na stred, ktorá vyzerá takto:

tr riadkov a td buniek v HTML tabuľkách

Ešte raz pripomeniem, že tabuľky sa tvoria riadok po riadku (tr). Riadky (tr) už obsahujú bunky (td). Ak nastavíte parameter pre reťazec (tr), bude platný pre všetky bunky(td) v tomto riadku, ak pre konkrétnu bunku, tak len pre ňu. Vo vyššie uvedených príkladoch som špecifikoval farbu riadku, tento parameter bol distribuovaný podľa toho pre všetky bunky.

Pre značky tr a td existujú nasledujúce

zarovnať- zarovnanie textu vo vnútri bunky. Vľavo (vľavo), vpravo (vpravo), v strede (v strede)
valign- zarovnanie textu vo vnútri bunky vertikálne. Hore (hore), dole (dole), v strede (uprostred)
bgcolor- nastaví farbu čiary
šírka- šírka stĺpca (všetky bunky nižšie akceptujú tento parameter) je špecifikovaná v pixeloch alebo v percentách, kde 100% je šírka celej tabuľky
výška- výška bunky (všetky bunky v riadku akceptujú tento parameter)

Zvážte kód, v ktorom je obsah buniek (td) zarovnaný na rôznych okrajoch: v prvom vľavo, v druhom vpravo:

html tabuľka

1. stĺpec	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca
1. stĺpec	Stobets 2

Výsledok

Pomocou tabuliek môžete vytvoriť veľmi dobrú stránku. Nezabudnite, že do buniek môžete vkladať nielen text, ale aj obrázky, odkazy a ďalšie!)

Ďakujem za pozornosť! Dúfam, že materiál bol užitočný!

Táto prednáška sa podrobne zaoberá tým, ako sa tabuľky používajú v značkách HTML. Ide o tabuľkovú organizáciu textu a tabuľkovú súradnicovú mriežku a grafiku usporiadanú do tabuliek.

Spôsoby popisu tabuliek v HTML

S vývojom WWW sa ukázalo, že nástroje, ktoré sú vložené do HTML nestačia na kvalitné zobrazenie rôzne druhy Dokumenty. Nevýhodou HTML bol nedostatok možností zobrazenia tabuľky v jeho štruktúre. Na tento účel je vopred naformátovaný text (tag

), v ktorom bola tabuľka ohraničená znakmi ASCII. Ale táto forma prezentácie tabuľky nestačila Vysoká kvalita a vymanili sa zo všeobecného štýlu dokumentu. Zavedením tabuliek v HTML získali správcovia webu nielen nástroj na umiestňovanie textu a čísel, ale aj výkonný dizajnový nástroj na umiestňovanie grafiky a textu na správne miesto na obrazovke.

Vytváranie tabuliek v HTML

Značka sa používa na popis tabuliek.<ТАВLЕ>. Tag<ТАВLЕ>, ako mnoho iných, automaticky preloží riadok pred a za tabuľkou.

Vytvorenie riadku tabuľky - tag<ТR>

Tag<ТR>(Riadok tabuľky, riadok tabuľky) vytvorí riadok tabuľky. Všetok text, ostatné značky a atribúty, ktoré je potrebné umiestniť na jeden riadok, musia byť umiestnené medzi značkami lt;TR>..

Definovanie buniek tabuľky - Tag<ТD>

Bunky s údajmi sú zvyčajne umiestnené v riadku tabuľky. Každá bunka obsahujúca text alebo obrázok musí byť obklopená značkami<ТD>. Počet značiek<ТD>v riadku určuje počet buniek

tabuľky

1. stĺpec	Stobets 2
Text v prvej bunke prvého stĺpca	Text v druhej bunke druhého stĺpca

Ak má tabuľka dva značky TR, potom má dva riadky.
Ak sú v riadku tri značky TD,	potom v ňom	tri stĺpce.

Hlavičky stĺpcov tabuľky – tag<ТН>

Nadpisy stĺpcov a riadkov tabuľky sa nastavujú pomocou značky nadpisu<ТН>(Hlavička tabuľky, hlavička tabuľky). Tieto značky sú ako<ТD>. Rozdiel je v tom, že text je uzavretý medzi značkami<ТН>, je automaticky napísaný tučným písmom a štandardne je umiestnený v strede bunky. Môžete vrátiť späť centrovanie a zarovnať text doľava alebo doprava. Ak používate<ТD>so značkou<В>a atribút<АLIGN=center>, text bude tiež vyzerať ako nadpis. Majte však na pamäti, že nie všetky prehliadače podporujú tučné písmo v tabuľkách, preto je najlepšie nastaviť hlavičky tabuliek pomocou<ТН>.

Názov je predvolene vycentrovaný	Hlavička môže zahŕňať stĺpce
Hlavičku je možné umiestniť pred stĺpce	Text alebo dáta	Text alebo dáta
Hlavička môže spájať riadky	Text alebo dáta	Text alebo dáta
	Text alebo dáta	Text alebo dáta
	Text alebo dáta	Text alebo dáta

Používanie hlavičiek tabuliek – tag<САРТIОN>

Tag umožňuje vytvárať hlavičky tabuliek. V predvolenom nastavení sú nadpisy vycentrované a umiestnené buď nad (<САРТION АLIGN=top>), alebo pod stolom (<САРТION ALIGN=bottom>). Názov môže pozostávať z ľubovoľného textu a obrázkov. Text bude rozdelený do riadkov zodpovedajúcich šírke tabuľky. niekedy tag<САРТION>používa sa na popis obrázku. Na to stačí popísať tabuľku bez okrajov.

Nadpis nad tabuľkou
Text alebo dáta	Text alebo dáta	Text alebo dáta	Text alebo dáta

Titul pod stolom
Text alebo dáta	Text alebo dáta	Text alebo dáta

atribút NOWRAP

Zvyčajne každý text, ktorý sa nezmestí na jeden riadok bunky tabuľky, prejde na nasledujúci riadok. Avšak pri použití atribútu NOWRAP so značkami<ТН>alebo<ТD>dĺžka bunky sa rozšíri tak, aby sa text v nej obsiahnutý zmestil na jeden riadok.

atribút COLSPAN

značky<ТD>A<ТН>sú upravené pomocou atribútu COLSPAN (Column Span). Ak chcete, aby bola niektorá bunka širšia ako horná alebo dolná, môžete použiť atribút COLSPAN a natiahnuť ju na ľubovoľný počet bežných buniek.

Ak chcete, aby bola niektorá bunka širšia ako horná alebo spodná časť,	môžete použiť atribút COLSPAN=2,
natiahnuť ho na ľubovoľný počet normálnych buniek.

atribút ROWSPAN

Atribút ROWSPAN použitý v značkách<ТD>A<ТН>, je podobný atribútu COLSPAN=, okrem toho, že určuje počet riadkov, ktoré bude bunka obsahovať. Ak zadáte číslo väčšie ako jedna v atribúte ROWSPAN=s, zodpovedajúci počet riadkov musí byť pod roztiahnutou bunkou. Nemožno ho umiestniť na spodok tabuľky.

atribút WIDTH

Atribút WIDTH má dve použitia. Môžete to vložiť do štítku<ТАВLЕ>dať šírku celej tabuľky, alebo sa dá použiť v tagoch<ТD>alebo<ТН>na nastavenie šírky bunky alebo skupiny buniek. Šírka môže byť špecifikovaná v pixeloch alebo v percentách. Napríklad, ak nastavíte v tagu<ТАВLЕ>ŠÍRKA=250, získate tabuľku so šírkou 250 pixelov bez ohľadu na veľkosť obrazovky stránky. Pri nastavení WIDTH=50% v tagu<ТАВLЕ>tabuľka zaberie polovicu šírky strany pri akejkoľvek veľkosti obrázka na obrazovke. Takže pri zadávaní šírky tabuľky v percentách majte na pamäti, že ak má používateľ úzku zobrazenú oblasť, vaša stránka môže vyzerať trochu zvláštne. Ak používate pixely a tabuľka je širšia ako zobrazovaná oblasť, v spodnej časti sa zobrazí posúvač, ktorý umožňuje posúvať sa po stránke doľava a doprava. V závislosti od aktuálnych úloh môže byť užitočný ktorýkoľvek spôsob nastavenia šírky stola.

Text alebo dáta - 100% šírka

alebo

Text alebo dáta – šírka 50 %.

alebo

Text alebo dáta – šírka 200 px

alebo

Text alebo dáta – šírka 100 px

Aplikácia prázdnych buniek

Ak bunka neobsahuje žiadne údaje, nebude mať okraje. Ak chcete, aby bunka mala okraje, ale žiadny obsah, musíte do nej vložiť niečo, čo pri prezeraní nebude viditeľné. Môžeš použiť prázdny reťazec <ВR>. Môžete dokonca definovať prázdne stĺpce zadaním ich šírky v pixeloch alebo relatívnych jednotkách a nezadávaním žiadnych údajov do výsledných buniek. Tento nástroj môže byť užitočný pri umiestňovaní textu a grafiky na stránku.

CELLRADDING atribút

Tento atribút určuje šírku prázdneho priestoru medzi obsahom bunky a jej okrajmi, čiže nastavuje okraje vo vnútri bunky.

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

Atribúty ALIGN a VALIGN

značky<ТR>, <ТD>A<ТН>možno upraviť pomocou atribútov ALIGN a VALIGN. Atribút ALIGN určuje vodorovné zarovnanie textu a grafiky, teda vľavo, vpravo alebo na stred. Horizontálne zarovnanie je možné nastaviť niekoľkými spôsobmi:

ALIGN=krvácanie posúva obsah bunky blízko k ľavému okraju.

ALIGN=vľavo Zarovná obsah bunky doľava, pričom zohľadní odsadenie určené atribútom CELLPADDING.

ALIGN=stred vycentrovať obsah bunky.

ALIGN=vpravo Zarovná obsah bunky doprava, pričom zohľadní odsadenie určené atribútom CELLPADDING.

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

Atribút VALIGN zarovnáva text a grafiku v bunke vertikálne. Vertikálne zarovnanie je možné nastaviť niekoľkými spôsobmi:

VALIGN=vrchol Zarovná obsah bunky k jej hornému okraju.

VALIGN=stredný Vertikálne vycentruje obsah bunky.

VALIGN=dole Zarovná obsah bunky k jej spodnému okraju.

Atribút VALIGN zarovnáva text a grafiku v bunke vertikálne.	vrch,	stred,	dno.
VALIGN=top Zarovná obsah bunky k jej hornému okraju.	vrch,	vrch,	top.
VALIGN=middle Vertikálne vycentruje obsah bunky.	stred,	stred,	stredná.
VALIGN=dole Zarovná obsah bunky k jej spodnému okraju.	dno,	dno,	dno.

atribút BORDER

V tagu<ТАВLЕ>často určujú, ako budú vyzerať okraje, teda čiary, ktoré obklopujú bunky tabuľky a tabuľku samotnú. Ak nenastavíte rám, dostanete stôl bez riadkov, ale priestor pre ne bude pridelený. Rovnaký výsledok možno dosiahnuť nastavením<ТАВLЕ ВОRDER=0>. Niekedy chcete urobiť hranicu hrubšiu, aby lepšie vynikla. Môžete nastaviť výlučne tučné okraje, aby ste upozornili na obrázok alebo text. Pri vytváraní vnorených tabuliek musíte pre rôzne tabuľky vytvoriť okraje s rôznou hrúbkou, aby sa dali ľahšie rozlíšiť.

CELLSPACING atribút

Atribút CELLSPACING určuje medzery medzi bunkami v pixeloch. Ak tento atribút nie je zadaný, predvolená hodnota je dva pixely. Pomocou atribútu CELLSPACING= môžete umiestniť text a grafiku kamkoľvek chcete. Ak chcete nechať prázdne miesto, môžete do bunky zadať medzeru.

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta		Text alebo dáta

atribút BGCOLOR

Tento atribút vám umožňuje nastaviť farbu pozadia. V závislosti od toho, s ktorým tagom (TABLE, TR, TD) je aplikovaný, je možné nastaviť farbu pozadia pre celú tabuľku, pre riadok alebo pre jednu bunku. Hodnota tohto atribútu je kód RGB alebo názov štandardnej farby.

Text alebo dáta	Text alebo dáta	Text alebo dáta
Text alebo dáta	Text alebo dáta	Text alebo dáta

atribút BACKGROUND

Tento atribút nastavuje obrázok na pozadí tabuliek. Použiteľné pre značky TABLE a TD. Jeho hodnota je adresa URL súboru obrázka na pozadí. Použitie tohto atribútu je popísané nižšie.

Používanie tabuliek v dizajne stránky

Tabuľky sú dobré, pretože v prípade potreby môžete ich okraje zneviditeľniť. To umožňuje použitie značky<ТАВLЕ>krásne umiestnite text a grafiku na stránku. Ahoj tag<ТАВLЕ>zostáva jediným výkonným formátovačom v HTML. Dizajnéri webových stránok majú teraz takmer rovnakú slobodu, pokiaľ ide o používanie „bieleho priestoru“, ako tvorcovia. vytlačené stránky. Tabuľky sú najlepším spôsobom, ako sa vzdialiť od hierarchického usporiadania textu na webových stránkach.

Ak prehliadač podporuje tabuľky, zvyčajne zobrazí najviac zaujímavé efekty získané s ich pomocou

Uralská štátna pedagogická univerzita

Vitajte!

Výcvikový kurz"Základy WEB-masteringu"

Vytváranie farebných tabuliek

Niektoré prehliadače umožňujú zobrazenie farieb. Existuje niekoľko spôsobov, ako vyfarbiť tabuľku, väčšinou v závislosti od prehliadača, ktorý používate.

Farebné okraje v Netscape Navigator. Nielenže môžete obklopiť stôl krásny rám, ale nastavte mu aj farbu, ktorá sa líši od farieb textu a pozadia. Vytvorte jednoduchý šedý GIF (alebo akýkoľvek GIF, ktorý by ste chceli mať ako pozadie) a definujte ho v tagu<ВODY>ako pozadie stránky. Potom nastavte farbu pozadia stránky. Výsledkom je vaša značka<ВОDY>bude vyzerať nejako takto:

Vytvorili ste dvojité pozadie - GIF a nastaviť farbu. V dôsledku toho bude farba pozadia viditeľná na všetkých okrajoch tabuľky a vodorovné čiary (<НR>). Či už je váš obrázok GIF na pozadí sivý alebo nie, farebné čiary a okraje tabuľky výrazne vyniknú. Ak nie je GIF na pozadí príliš komplikovaný, čas načítania stránky sa zvýši len mierne.

Stôl s rámami

názov	Priezvisko
Larisa	Isaev
Dmitrij	Kolesnikov

VÝSLEDOK:

Stôl bez okrajov

Stôl s rámami

Atribúty značky A na zlúčenie buniek

Príklad

	fretky
	hmotnosť	veľkosť
samcov	1,2 - 2,5 kg	do 70 cm
ženy	0,7 – 1,0 kg	do 40 cm

VÝSLEDOK:

	fretky
	hmotnosť	veľkosť
samcov	1,2 - 2,5 kg	do 70 cm
ženy	0,7 – 1,0 kg	do 40 cm

Podľa štandardu HTML5 sú všetky doteraz používané atribúty tabuliek, ako napr hranica, rozmiestnenie buniek, čalúnenie buniek atď. už nie sú podporované a validátor ich použitie považuje za chyby v kóde. Na navrhovanie tabuliek je potrebné použiť štýly CSS, ktorými môžete nahradiť všetky zastarané atribúty tabuliek. Napríklad namiesto atribútu rozmiestnenie buniek vlastnosť sa používa na zmenu vzdialenosti medzi bunkami tabuľky ohraničenie a na zarovnanie obsahu v bunkách tabuľky - vlastnosti zarovnanie textu A vertikálne-aling. CSS štýly pre tabuľky

html značky zoskupenia riadkov tabuľky

Značky možno použiť na vytvorenie zložitejších tabuliek:

Príklad

konzumácia piva
CELÉ MENO.	litrov
Celkom	250
Ivanov Ivan Ivanovič	133
Petrov Petr Petrovič	117

VÝSLEDOK:

značky zoskupenia stĺpcov tabuľky html

Atribút značiek A

Najjednoduchší spôsob, ako pochopiť, ako možno použiť zoskupovanie riadkov a stĺpcov, je príklad tabuľky sudoku.

Značka col nastavuje parametre pre každý stĺpec samostatne. Je úplne jedno ako píšeš zdrojový kód:

alebo

Príklad

žltá		Červená

VÝSLEDOK:

Nesnažte sa nastaviť štýl zarovnanie textu pre značky A . Text umiestnený medzi značkami ..., nededí tento štýl, pretože tag nie je potomkom žiadnej značky , bez značky .

Vodorovné zarovnanie textu v konkrétny stĺpec tabuľky je možné upraviť zadaním štýlu zarovnanie textu pre pseudo triedu td:n-té dieťa(n), kde n je číslo stĺpca. Táto metóda však nebude fungovať, ak medzi bunkami tabuľky existuje atribút colspan.

Príklad

názov	Cena, rub.)
Solárium za minútu platby (od 4 minút)	15
50-minútové solárium (14 rub/min, 1 mesiac)	700
100 minút solária (13 rub/min, 2 mesiace)	1300
200 minút solária (12 rub/min, 3 mesiace)	2400

VÝSLEDOK:

Táto metóda však nebude fungovať, ak medzi bunkami tabuľky existuje atribút colspan.

Tabuľka – súbor údajov rozložených do riadkov a buniek. Väčšina buniek obsahuje tabuľkové údaje, zvyšok obsahuje hlavičky riadkov a stĺpcov, ktoré popisujú obsah.

Ak chcete vytvoriť tabuľku v dokumente HTML, použite značku

, je to kontajner, ktorý obsahuje celý obsah tabuľky.

Vytváranie tabuľky vždy začína riadkami, ktoré sú definované pomocou značky

, každý riadok zase pozostáva z buniek. Tag môže obsahovať iba značky na vytváranie buniek.

V HTML existujú dve rôzne značky na vytváranie buniek, prvá je

, vytvára pravidelné bunky s údajmi. V predvolenom nastavení označte obsah

zarovnané doľava. Druhý tag na vytváranie buniek je tag

, umožňuje definovať bunky, ktoré obsahujú hlavičky pre stĺpce alebo riadky, obsah takýchto buniek je zobrazený tučným textom a vycentrovaný. značky

môže obsahovať akékoľvek prvky HTML, ktoré sú dostupné na použitie v tele dokumentu.

Prvý titul	Druhý titul
riadok 1, bunka 1	riadok 1, bunka 2
riadok 2, bunka 1	riadok 2, bunka 2

Skúste »

Tabuľka v tabuľke

HTML má schopnosť vytvárať vnorené tabuľky, teda tabuľky, ktoré sa nachádzajú vo vnútri iných tabuliek. Ak chcete vytvoriť vnorenú tabuľku, musíte do ľubovoľnej značky umiestniť kód tabuľky, ktorú chcete vnoriť

Vezmime si napríklad tabuľku, ktorú sme už predtým vytvorili, a umiestnime tento kód do druhej bunky druhého riadku:

Prvý titul

Druhý titul

riadok 1, bunka 1

riadok 1, bunka 2

riadok 2, bunka 1

riadok 2, bunka 2

Prvý titul	Druhý titul
riadok 1, bunka 1	riadok 1, bunka 2
riadok 2, bunka 1	riadok 2, bunka 2

akýkoľvek tabuľka v html je množina riadkov a stĺpcov, na ktorých priesečníku sú bunky. Vytváranie tabuliek v HTML je dosť jednoduché, stačí si len predstaviť finálny model. V jazyku HTML tabuľky slúžia nielen na prezentáciu údajov, možno ich použiť na umiestnenie textových blokov, obrázkov atď. na webovej stránke, t.j. s ich pomocou môžete vytvoriť rozloženie samotnej stránky.

Element TABLE, vytvorte tabuľku

Na vytváranie tabuliek v HTML sa používa prvok tabuľky a celý kód (jeho obsah) tabuľky sú umiestnené medzi značkami . Atribúty tohto prvku nastavujú hodnoty pre celú tabuľku:

pozadie- je nastavený obrázok (URL), ktorý môže byť podkladom pre celú tabuľku;
bgcolor- farba pozadia tabuľky, nastavte, ak pozadie nie je nastavené ako obrázok;
hranica- hrúbka čiar tabuľky, ak sú potrebné viditeľné okraje;
farba okraja- farba čiar tabuľky;
čalúnenie buniek- vzdialenosť od textu vo vnútri buniek k okrajom buniek;
rozmiestnenie buniek- vzdialenosť od okrajov tabuľky k vonkajším okrajom buniek (vnútri tabuľky);
šírka- nastavte hodnotu šírky tabuľky v px alebo % .

Napíšeme príklad kódu pre tabuľku s modrým pozadím, hrúbkou čiary 1px bielou, odsadením vnútri a mimo buniek 2px, šírkou 100 % stránky:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

Pridanie riadku

Každá tabuľka musí mať aspoň jeden riadok, špecifikujú ho značky . V nasledujúcom príklade sa pozrieme na príklad pridania riadku:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

Pridávanie buniek

Bunky tvoria zvislé stĺpce tabuľky, sú označené značkami . Pridajte bunky do našej tabuľky:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

Bunka #1
Bunka #2
Bunka #3

Uvidíme výslednú tabuľku:

Spájanie reťazcov

V niektorých prípadoch môže byť potrebné roztiahnuť jeden stĺpec do niekoľkých riadkov, na to sa používa atribút rozpätie riadkov An, ktorého hodnota určuje počet riadkov potrebných na zreťazenie. Pozrime sa na príklad:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

rowspan="2" >Riadky #1 a #2 sú zlúčené
Bunka #1
Bunka číslo 2

Bunka #3
Bunka #4

Riadok č. 3
Bunka číslo 5
Bunka číslo 6

Prehliadač zobrazí:

Riadky #1 a #2 sa zlúčili	Bunka #1	Bunka číslo 2
Riadky #1 a #2 sa zlúčili	Bunka #3	Bunka #4
Riadok č. 3	Bunka číslo 5	Bunka číslo 6

Zlúčenie stĺpcov

Stĺpce sa kombinujú rovnakým spôsobom, iba pomocou atribútu colspan. Pozrime sa na príklad:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%" >

colspan="2" >Stĺpce #1 a #2 sú zlúčené
Stĺpec č. 3

Bunka #1
Bunka #2
Bunka #3

Bunka #4
Bunka číslo 5
Bunka číslo 6

Prehliadač zobrazí:

Atribúty colspan A rozpätie riadkov možno aplikovať súčasne. V prehliadači to bude vyzerať takto:

Alebo takto:

A skúste napísať kód sami!

Rozmery a zarovnanie tabuľky

Výšku a šírku je možné nastaviť ako pre celú tabuľku ako celok, tak aj pre jednotlivé riadky a stĺpce, a to pomocou už známych atribútov šírka A výška, hodnoty sú špecifikované v pixeloch aj v percentách.

Vodorovné zarovnanie tabuľky sa nastavuje atribútom zarovnať, už poznáte hodnoty: vľavo, v strede, vpravo. A aby bolo možné zarovnať text v bunkách tabuľky, atribút horizontálneho zarovnania zarovnať musí byť aplikovaný na každú značku td. S CSS je to oveľa jednoduchšie. Atribút sa používa na vertikálne zarovnanie obsahu bunky. valign. Má tiež svoje vlastné hodnoty - vertikálne zarovnanie na stred stredná, hore top a dole dno základná čiara (riadok, na ktorom sa nachádza text aktuálneho riadku).

Pozadie tabuľky

Môžete tiež nastaviť obrázok alebo farbu pozadia pre celú tabuľku aj pre jednu bunku, všetko závisí od toho, aké ciele sledujete. Toto je nastavené – pre obrázok – atribútom pozadie, ktorého hodnota obsahuje cestu k požadovanému grafickému súboru. Pre farbu pozadia - atribút bgcolor, kde hodnota je názov farby.

Konečne

Tu je všetko, čo potrebujete vstupný level. Na konci časti o vytváraní tabuliek v HTML je váš prvý úvod do jazyk HTML. Cez tabuľky v HTML môžete vytvárať jednoduché šablóny webových stránok, preto vám navrhujem, aby ste si svoju prvú plnohodnotnú vytvorili práve teraz. Na to postačuje pokrytý materiál. Vpred k dobytiu hyperpriestoru!