Reklama na portáli

Ako vytvoriť tabuľku v html dokumente. Atribúty a vlastnosti a

Vďaka všestrannosti tabuliek a veľkému množstvu parametrov, ktoré riadia ich vzhľad, sa tabuľky už dávno stali jednoznačným štandardom pre usporiadanie webových stránok. Tabuľka s neviditeľným okrajom vyzerá ako modulárna mriežka, do ktorej blokov je vhodné umiestniť prvky webovej stránky. Toto však nie je úplne správny prístup, pretože každý objekt HTML je definovaný pre svoje vlastné účely a ak sa nepoužíva na zamýšľaný účel a všade, znamená to, že neexistujú žiadne alternatívy. Tak to bolo dlho, kým vrstvy nenahradili tabuľky v rozložení webových stránok. Neznamená to, že vrstvy sa teraz používajú stále, ale trend sa už jasne ukázal – tabuľky sa používajú na umiestnenie tabuľkových údajov a vrstvy na rozloženie a dizajn.

Vytvorenie tabuľky

Tabuľka pozostáva z riadkov a stĺpcov buniek, ktoré môžu obsahovať text a obrázky. Tabuľky sa zvyčajne používajú na organizáciu a prezentáciu údajov, ale tabuľky sa na to neobmedzujú. Pomocou tabuliek je vhodné rozložiť rozloženie stránky tak, že sa fragmenty textu a obrázkov usporiadajú požadovaným spôsobom.

Ak chcete pridať tabuľku na webovú stránku, použite značku

. Tento prvok slúži ako kontajner pre prvky, ktoré definujú obsah tabuľky. Každá tabuľka pozostáva z riadkov a buniek, ktoré sú špecifikované pomocou značiek A
. Tabuľka musí obsahovať aspoň jednu bunku (príklad 12.1). Povolené namiesto značky použite značku . Text v bunke so štylizovanou značkou , zobrazí prehliadač tučným písmom a zarovná ho do stredu bunky. V opačnom prípade sa rozdiely medzi bunkami vytvárajú prostredníctvom značiek A Nie

Príklad 12.1. Vytvorenie tabuľky

Značka TABLE

Bunka 1 Bunka 2
Bunka 3 Bunka 4


Poradie buniek a ich vzhľad je znázornený na obr. 12.1.

Tabuľky zohrávajú veľmi dôležitú úlohu pri vytváraní neviditeľného rámca pre webovú stránku. A to pomôže usporiadať text, menu, obrázky atď. rovnomerne a krásne.
Ak chcete lepšie pochopiť, čo sa vám snažím povedať, pozrite si tento príklad drôtového modelu webovej stránky:

takže, ako vytvoriť jednoduchú tabuľku v HTML?
Na zostavenie tabuľky musíte použiť tri značky:

TABLE – táto značka je potrebná na otvorenie tabuľky. Je to druh kontajnera, ktorý obsahuje ďalšie prvky. Je ohnutá tak, že to bez šišky nezistíte. Nevadí, prídete na to, keď uvidíte príklad.
Záverečná značka

požadovaný.

Tabuľka pozostáva z riadku

riadok 1 riadok 1
riadok 2 riadok 2
riadok 3 riadok 3
bunka 1 bunka 2
bunka 1 bunka 2
bunka 1 bunka 2

TR – vytvorí nový riadok tabuľky. Záverečná značka požadovaný.

T.D. – vytvorí novú bunku v riadku. Záverečná značka požadovaný.

Pozrime sa na príklad, aby sme lepšie porozumeli všetkým vyššie uvedeným:

Tabuľky v HTML

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2
riadok 3 bunka 1 riadok 3 bunka 2


Tu je výsledok:

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2
riadok 3 bunka 1 riadok 3 bunka 2

Dovoľte mi všetko vysvetliť.
Pred každým vytvorením novej tabuľky sa otvorí značka

.
Potom ho umiestnite do stredu nádoby
tag , čo naznačuje začiatok novej série.
Do tohto riadku vložíme pomocou tagu dve bunky s obsahom

Uzavretie riadku štítkom .
Otvorte ďalší riadok so značkou
Uzavretie riadku štítkom .
Otvorte tretí riadok so značkou a znova do nej vložte dve bunky.
Uzavretie riadku štítkom .
Uzavretie stola štítkom
riadok 1 bunka 1 riadok1 bunka2
.

Myslím, že si na to prišiel? Ak niekto zabudol, čo je to atribút hranica ktorý používam spolu s tagom

, Pripomínam, že ide o hrúbku rámu. Ak v hranica sa nastaví na „0“, potom budú okraje tabuľky neviditeľné.

Pozrite si pár príkladov vytvorené tabuľky a môžete ísť ďalej:

Tabuľky v HTML

riadok 1 bunka 1
riadok 2 bunka 1


výsledok:

Aby ste mohli vložiť obrázok do tabuľky, musíte mať základné vedomosti o tom, ako vložiť obrázok do súboru HTML. Hovorím o tom v. Teraz, keď poznáte základy obrázkov v HTML, môžete skúsiť vložiť obrázok do tabuľky. Dá sa to urobiť nasledovne:

v rade medzi značkami vložiť obrázok.

Tabuľky v HTML

riadok 1 bunka 1 riadok 1 bunka 2


výsledok:

riadok 1 bunka 1 riadok 1 bunka 2

Ako zlúčiť bunky v tabuľke?

Ak chcete zlúčiť bunky v tabuľke, musíte použiť nasledujúce atribúty:
COLSPAN– určuje počet stĺpcov.
Predvolená hodnota je 1.
ROWSPAN– určuje počet riadkov.
Predvolená hodnota je 1.


zlučovanie buniek v hornom riadku pomocou atribútu colspan :

Tabuľky v HTML

riadok 1 bunka 1+2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

Ako nastaviť veľkosť stola?

Ak chcete nastaviť výšku a šírku tabuľky, použite nasledujúce atribúty:

WIDTH- šírka stola. Veľkosť je určená v pixeloch alebo percentách.
VÝŠKA- výška stola. Veľkosť je určená v pixeloch alebo percentách.

Tabuľky v HTML

riadok 1 bunka 1riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

Zarovnanie obsahu v tabuľke

Ak chcete zarovnať obsah (text, obrázky) vo vnútri tabuľky, môžete použiť nasledujúce atribúty:

ZAROVNAŤ– horizontálne zarovnanie obsahu v tabuľke.
Pripisovať ZAROVNAŤ priradené hodnoty: vľavo (predvolené), centrum,správny.
vľavo - stlačte obsah na ľavú stranu;
centrum - nainštalovať v strede;
správny - posuňte obsah na pravú stranu

VALIGN– vertikálne zarovnanie obsahu v tabuľke.
Pripisovať VALIGN priradené hodnoty: hore, dole, uprostred.
top – stlačte obsah nahor;
dno – stlačte obsah na dno;
stred – nastavte obsah v strede

Tabuľky v HTML

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

Ako urobiť pozadie na stôl?

Môžete tiež nastaviť pozadie tabuľky pre všetky bunky spolu, ako aj pre každú bunku samostatne. Pozadie môžete nastaviť farbou alebo obrázkom. Pozadie má dva atribúty:

BGCOLOR– farba pozadia pre celú tabuľku alebo pre každú bunku jednotlivo. Farba je určená kódom alebo slovom.
POZADIE– pozadie v tabuľke je vyplnené obrázkom.

Pozor: ak chcete nastaviť farbu pozadia alebo obrázok pozadia pre celú tabuľku, atribúty je potrebné nastaviť v tagu

. A ak len do konkrétnej bunky, tak do značky

Upozorňujeme, že pri zlúčení buniek sa počet prvkov v riadku zmení. Napríklad, ak má tabuľka 3 stĺpce s bunkami a skombinujeme prvú a druhú bunku, potom budú vo vnútri značky definujúcej tento riadok 2 prvky, prvý z nich bude obsahovať atribút colspan="2".

Príklad HTML tabuľky so zlúčenými bunkami

Zdrojový kód HTML tabuľky so zlúčenými bunkami

.

Pre lepšie pochopenie si pozrite príklad:

Tabuľky v HTML

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

Pozor: ak má obrázok na bunku menšiu veľkosť, potom sa bude opakovať, kým nevyplní bunku až do konca. Ak je obrázok väčší ako bunka, pozadie obrázka sa oreže, aby sa zmestilo do bunky.

A nakoniec vám o tom poviem dva užitočné atribúty.

V prípade, že zrazu chcete zväčšiť vzdialenosť medzi všetkými bunkami, pomôžu vám nasledujúce atribúty:

CELLPADDING– vzdialenosť medzi rámcom každej bunky html tabuľky a materiálom, ktorý obsahuje.

Tabuľky v HTML

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2

CELLSPACING– vzdialenosť medzi hranicami susedných buniek.

Tabuľky v HTML

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2


výsledok:

riadok 1 bunka 1 riadok1 bunka2
riadok 2 bunka 1 riadok 2 bunka 2

Fíha, hovoril som ti to!
Dúfam, že som sa s úlohou vyrovnal a jasne vysvetlil všetko, o čom som vedel html tabuľky. Odporúčam dobre zabezpečiť materiál.
Skúste si vytvoriť vlastnú tabuľku, alebo ešte lepšie, celý rámec pre webovú stránku z html tabuľky.
Všetko najlepšie!
Ďakujem za návštevu môjho blogu

L ľubovoľný tabuľky v HTML je množina riadkov a stĺpcov, na ktorých priesečníku sú bunky. Vytváranie tabuliek v HTML je celkom jednoduché, stačí si len predstaviť výsledný model. V HTML sa tabuľky používajú nielen na prezentáciu údajov, môžu sa 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

Ak chcete vytvoriť tabuľky v HTML, 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 zadaný obrázok (URL), ktorý môže byť pozadím celej tabuľky;
  • bgcolor- farba pozadia tabuľky, nastavená, ak nie je špecifikované pozadie vo forme obrázka;
  • hranica- hrúbka čiar tabuľky, ak sú potrebné viditeľné okraje;
  • bordercolor- farba čiar tabuľky;
  • výplň 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- nastavuje šírku tabuľky v px alebo % .

Napíšme príklad kódu pre tabuľku s modrým pozadím, hrúbkou čiary 1px v bielej farbe, výplň vnútri a mimo buniek 2px, šírka 100 % stránky:

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

Pridajte riadok

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:

Reťazové struny

V niektorých prípadoch môže byť potrebné natiahnuť jeden stĺpec na niekoľko riadkov, na tento účel sa používa atribút rozpätie riadkov, ktorého hodnota určuje počet riadkov potrebných na zlúčenie. Pozrime sa na príklad:

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

rowspan="2" >Riady č. 1 a č. 2 sú zlúčené
Bunka č. 1
Bunka č. 2

Bunka č. 3
Bunka č. 4

Linka č.3
Bunka č. 5
Bunka č. 6

Prehliadač zobrazí:

Linky #1 a #2 sú zlúčené Bunka č. 1 Bunka č. 2
Bunka č. 3 Bunka č. 4
Linka č.3 Bunka č. 5 Bunka č. 6

Zlúčenie stĺpcov

Stĺpce sa kombinujú rovnakým princípom, 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 č. 5
Bunka č. 6

Prehliadač zobrazí:

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

Alebo takto:

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 percentách.

Vodorovné zarovnanie tabuľky určuje atribút zarovnať, významy sú vám už známe: 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. Používanie CSS to výrazne zjednodušuje. Na vertikálne zarovnanie obsahu buniek použite atribút valign. Má tiež svoje vlastné hodnoty - vertikálne zarovnanie do stredu stred, na vrchu top a pozdĺž dna dno baseline (riadok, na ktorom sa nachádza text aktuálneho riadku).

Pozadie tabuľky

Obrázok alebo farbu pozadia je možné nastaviť aj pre celý stôl alebo pre samostatnú bunku, všetko závisí od toho, aké ciele sledujete. To sa nastavuje – pre obrázok – atribútom pozadie, ktorého hodnota určuje cestu k požadovanému grafickému súboru. Pre farebné pozadie - atribút bgcolor, tu je hodnota názov farby.

Konečne

To je v podstate všetko, čo potrebujete pre vstupnú úroveň. Na konci časti o vytváraní tabuliek v HTML sa vaše prvé zoznámenie s jazykom HTML končí. Používaním tabuľky v HTML Môžete vytvárať jednoduché šablóny webových stránok, preto vám navrhujem, aby ste si svoju prvú úplnú šablónu vytvorili práve teraz. Pokrytý materiál na to úplne stačí. Vpred k dobytiu hyperpriestoru!


/ Bez čoho nemôžete vytvoriť webovú stránku: ∼ ∼

Jednoduchý zdrojový kód HTML tabuľky



















Bunka 1 Bunka 2 Bunka 3
Bunka 4 Bunka 5 Bunka 6
Bunka 7 Bunka 8 Bunka 9

Hlavičky HTML tabuliek

V HTML tabuľkách sú 2 typy buniek. Značka definuje bunku normálneho typu. Ak bunka funguje ako hlavička, je definovaná pomocou .

Príklad HTML tabuľky s hlavičkou th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Škoda Mercedes-AMG Mini
Lamborghini Inteligentný Rolls-Royce

Zdrojový kód HTML tabuľky s th hlavičkami
























Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Škoda Mercedes-AMG Mini
Lamborghini Inteligentný Rolls-Royce

Zlúčenie buniek v tabuľke HTML

HTML tabuľky majú schopnosť zlúčiť bunky horizontálne a vertikálne.

Komu zlúčiť bunky vodorovne použite atribút colspan=" X“ , v bunke alebo , kde X

Komu vertikálne zlúčiť bunky použite atribút rowspan=" X“ , v bunke alebo , kde X- počet buniek, ktoré sa majú zlúčiť.

Bunky je možné zlúčiť horizontálne aj vertikálne súčasne. Ak to chcete urobiť, použite atribúty colspan aj rowspan pre požadovanú bunku:

Text bunky





























Nissan
ModelVybavenieDostupnosť
Nissan QashqaiVISIA+
TEKNA+
Nissan X-TrailACENTA+
CONNECTA-

Hlavičky a päty v HTML tabuľkách

HTML tabuľky možno rozdeliť do 3 oblastí: hlavička, telo, päta.

A to tak, že sa riadky vybranej časti tabuľky obalia tagmi. definuje oblasť hlavičky, - oblasť päty, - hlavnú časť tabuľky.

V predvolenom nastavení nemajú hlavičky a päty iný štýl (v prípade potreby to možno urobiť pomocou CSS), ale môžu ich používať prehliadače. Napríklad pri tlači viacstranovej tabuľky môžu byť hlavičky a päty duplikované na každej vytlačenej strane.

Správne poradie umiestnenia značiek oblasti do kódu HTML tabuľky je nasledovné: najprv hlavička, potom päta a potom telo. V tomto prípade sa hlavná časť stránky zobrazí medzi hlavičkami a pätami.

V prípade potreby môžete do tabuľky pridať podpis. Ak to chcete urobiť, použite značku.

Príklad HTML tabuľky s hlavičkami a pätami

Zdrojový kód tabuľky s hlavičkami a pätami







































Konfigurácie Renault Sandero Stepway
Charakteristický SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Dostupnosť + + +
Výkon motora 0,9 (90 k) 0,9 (90 k) 1,5 (90 k)
Palivo benzín benzín diesel
Norma toxicity 6 eur 6 eur 5 eur

Stĺpce a skupiny stĺpcov

Tabuľku HTML je možné rozdeliť na stĺpce a skupiny stĺpcov pomocou značiek a .

Toto rozdelenie vám umožňuje nastaviť štýly pre tabuľku pomocou minimálneho počtu vlastností CSS, čím sa zníži množstvo kódu tabuľky (namiesto definovania štýlov pre každú bunku stĺpca môžete nastaviť štýly pre jeden alebo niekoľko stĺpcov naraz).

Štítky a sú umiestnené vo vnútri štítku pred štítkami, AKP6 (EDC)

Prenos

zdrojový kód HTML tabuľky A

































ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Charakteristický
1,5 (90 k) 1,2 (115 k) 1,5 (90 k) Výkon motora
diesel benzín diesel Palivo
Automatická prevodovka6 (EDC) Automatická prevodovka6 (EDC) Automatická prevodovka6 (EDC) Prenos

Tabuľky v rozložení stránky lokality

Na moderných weboch je dôležité, aby sa stránky zobrazovali správne na počítačoch aj mobilných zariadeniach. Na vytvorenie kostry HTML stránky nie je vhodné používať tabuľky, pretože sa stráca schopnosť prispôsobiť obsah obrazovkám rôznych veľkostí (počítače, smartfóny, tablety).

Značky skupín tabuliek sa najlepšie používajú vo vnútri stránky na zobrazenie obsahu v tabuľkovom formáte.

Úloha

Vytvorte tabuľku a zadajte jej parametre (okraje a vzdialenosť medzi bunkami) prostredníctvom štýlov.

Riešenie

Tabuľka pozostáva z riadkov a stĺpcov buniek, ktoré môžu obsahovať text a obrázky. Ak chcete pridať tabuľku na webovú stránku, použite značku

. Tento prvok slúži ako kontajner pre prvky, ktoré definujú obsah tabuľky. Každá tabuľka pozostáva z riadkov a buniek, ktoré sú špecifikované pomocou značiek A
. Tabuľka musí obsahovať aspoň jednu bunku (príklad 1). Povolené namiesto značky použite značku . Text v bunke so štylizovanou značkou , zobrazí prehliadač tučným písmom a zarovná ho do stredu bunky. V opačnom prípade sa rozdiely medzi bunkami vytvárajú prostredníctvom značiek A Nie

Príklad 1: Vytvorenie tabuľky

HTML5 IE Cr Op Sa Fx

Tabuľka tag

Bunka 1 Bunka 2
Bunka 3 Bunka 4


Poradie buniek a ich vzhľad je znázornený na obr. 1.

Ryža. 1. Výsledok vytvorenia tabuľky so štyrmi bunkami

atribút hraničnej značky

je povolené pridávať len s prázdnou hodnotou (
) alebo rovné 1. Všetky ostatné hodnoty nie sú overené.

Na ovládanie okrajov vnútri buniek použite vlastnosť padding style, ktorá sa pridá do selektora td. Vzdialenosť medzi bunkami sa mení pomocou vlastnosti border-spacing (príklad 2) pridanej do selektora tabuľky, prehliadač IE ju chápe až od verzie 8.0.

Príklad 2: Okraje vo vnútri buniek

HTML5 CSS 2.1 IE Cr Op Sa Fx

Tabuľka tag

Nadpis 1Nadpis 2
Bunka 3Bunka 4


Tabuľka s poľami a vzdialenosťou medzi bunkami je znázornená na obr. 2. Podobný výsledok možno dosiahnuť použitím bieleho rámu okolo buniek.

Ryža. 2. Polia v bunkách tabuľky