HTML táblázatcímkék - Ismerje meg a HTML táblázatcímkék példáit a szintaxissal

• Bevezetés a HTML táblázatokhoz

Bevezetés a HTML táblázatokhoz

A HTML táblázat lehetővé teszi az adatok, például szöveg, képek, linkek stb. Származtatását vagy meghatározását a cellák sorai és oszlopai szerint. A HTML táblázatok felhasználásával hozhatók létre

címke. Alapértelmezés szerint a táblázat adatai balra igazodnak. Ebben a témakörben megismerjük a HTML táblacímkéket.

A táblázat létrehozható a következő használatával

címkéket.

• Az

a tag meghatározza a táblázat létrehozásához használt táblázat sorokat.

A táblázati adatok a következőkön belül strukturálhatók

,	és
tag meghatározza a táblázat fejlécét. Az	a tag meghatározza az oszlop elkészítéséhez használt táblázatos cellákat. Az

a táblázat tartalma számos asztali elemmel.

Szintaxis

1. táblázat címsor	2. táblázat címsor
1. adatcella	2. adatcella
3. adatcellás	4. adatcella

Példák a HTML táblázatokra

Az alábbiakban bemutatjuk a HTML táblázatcímkék példáit

1. Alapvető asztali használat



HTML Table Tag Usage



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

Mentse el a kódot .html kiterjesztéssel, és nyissa meg a böngészőben. A következő kimenetet jeleníti meg:

2. Táblázat felirata

A táblázat feliratát a < felirat > címke segítségével lehet meghatározni.

Példa



HTML Table Tag Usage



Ez a táblázat felirata

Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

A fenti kód megjeleníti az alábbi kimenetet:

3. Táblázat cellák közötti távolság

A táblacellák helyét a cellpacing attribútum segítségével lehet meghatározni. A cellpacing attribútum meghatározza a tábla cellák közötti helyet.

Példa



HTML Table Tag Usage



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

A fenti kód a következő kimenetet jeleníti meg:

4. Asztalcellás párna

Az asztali cellák töltése a cellpadding attribútum segítségével határozható meg. A cellpadding attribútum távolsága az asztal cellájának szegélye és az adatok között.

Példa



HTML Table Tag Usage



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

A fenti kód megjeleníti az alábbi kimenetet:

5. Oszlop- és sorhossz-jellemzők

A két vagy több táblás sor összevonható egyetlen sorban a sorhossz-attribútum használatával, és a táblázat oszlopai egyetlen oszlopba egyesíthetők egy colspan-attribútum használatával.

Példa



HTML Table Tag Usage



Az első oszlop	Második oszlop	Harmadik oszlop
Első sor	Második sor	Harmadik sor
	Negyedik sor	Ötödik sor
Hatodik sor

A kód a következő kimenetet jeleníti meg:

6. A táblázat háttere

A táblázat háttere a bgcolor attribútum segítségével hozható létre. A táblázat cellájának szegélyét a border-color attribútummal lehet meghatározni.

Példa



HTML Table Tag Usage



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

Hajtsa végre a fenti kódot, és megjeleníti az alábbi kimenetet:

7. Az asztal magassága és szélessége

Az asztal magassága és szélessége a szélesség és a magasság attribútumok segítségével állítható be.

Példa



HTML Table Tag Usage



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

A fenti kód a következő kimenetet jeleníti meg:

8. Stílusos cellák

Példa



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Név	Ország
Dhoni	India
David Miller	Dél-Afrika
Joe Root	Anglia

Végezzük el a fenti kódot, az alábbiak szerint rendelkezünk:

8. Beágyazott táblák

Használhat egy táblát egy másik táblában, amelyet beágyazott táblának hívnak.

Nézzük meg az alábbi példát a beágyazott táblára:

Példa



HTML Table Tag Usage



Név Ország Dhoni India David Miller Dél-Afrika Joe Root Anglia

A fenti kód a következő kimenetet jeleníti meg:

A táblázat jellemzői

• igazítás: Ez az attribútum biztosítja az elem belsejében a tartalom igazítását.
• bgcolor: Ez az attribútum a táblázat háttér színét adja meg.
• border: Ez az attribútum meghatározza a táblázat celláinak szegélyét.
• cellpadding: Ez az attribútum megjeleníti az asztal cellák és a táblázat tartalma közötti párnázatot.
• cellpacing: Ez az attribútum megjeleníti a tábla cellák közötti helyet.
• keret: Megadja, hogy a külső határok melyik részei legyenek láthatóak.
• szabályok: Megadja, hogy a belső határok mely részei legyenek láthatóak.
• válogatható: Ez az attribútum jelzi, hogy a táblázat válogatható.
• Összegzés: Megadja, hogy milyen típusú táblatartalom van jelen.
• szélesség: Ez az attribútum megmutatja a tábla szélességét.
• magasság: Ez az attribútum határozza meg a tábla magasságát.

Következtetés

Eddig megvizsgáltuk a HTML táblázatok különféle típusait. A példák bemutatják az asztal stílusának kialakítását, az egyik asztal egymásba illesztését, az asztal magasságának és szélességének beállítását, az asztal cellák közötti távolság és párnázást, a háttér színének alkalmazását az asztalra és még sok másat.

Ajánlott cikkek

Ez egy útmutató a HTML táblázatcímkékhez. Itt a HTML táblázatcímkék példáit tárgyaljuk a táblázat szintaxisával és attribútumaival. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -

1. HTML űrlapelemek
2. Készítsen táblázatokat HTML-ben
3. HTML képcímkék
4. Mi a HTML
5. HTML keretek
6. HTML blokkok
7. Állítsa be a háttér színét HTML-ben a Példa segítségével