HTML táblázatcímke az adatok táblázatos formában történő megjelenítésére szolgál (sor * oszlop). Sok oszlop lehet egy sorban.

Létrehozhatunk táblázatot az adatok táblázatos formában történő megjelenítéséhez, segítségével

Minden táblában a táblázat sorát az határozza megcímke, a táblázat fejléce határozza meg, és a táblázat adatait az határozza megcímkéket.

A HTML táblák az oldal elrendezésének kezelésére szolgálnak pl. fejléc rész, navigációs sáv, törzstartalom, lábléc rész stb. De ajánlatos a div címkét a táblázat felett használni az oldal elrendezésének kezeléséhez.

HTML táblázat címkék

HTML táblázat példa

Lássuk a HTML-táblázat címkéjének példáját. A kimenet fent látható.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Kimenet:

java dobás kivétel

A fenti html táblázatban 5 sor és 3 oszlop = 5 * 3 = 15 érték található.

HTML táblázat szegéllyel

A HTML-táblázatok szegélyét kétféleképpen adhatjuk meg.

1. A HTML-beli táblázat border attribútuma szerint
2. Határtulajdonság szerint a CSS-ben

1) HTML Border attribútum

Használhatja a HTML táblázatcímke border attribútumait a border megadásához. De most nem ajánlott.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Kimenet:

2) CSS Border tulajdonság

Most ajánlott a CSS border tulajdonságának használata a border megadásához a táblázatban.

 table, th, td { border: 1px solid black; } 

Az összes szegélyt összecsukhatja egy szegélyben a border-collapse tulajdonsággal. Eggyé fogja omolni a határt.

időszak kulcsa

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Kimenet:

HTML táblázat cella kitöltéssel

A táblázat fejlécének és adatának kitöltését kétféleképpen adhatja meg:

1. A HTML-beli táblázat cellpadding attribútumával
2. A tulajdonság kitöltésével a CSS-ben

A HTML-tábla tag cellpadding attribútuma már elavult. CSS használata javasolt. Lássuk tehát a CSS kódját.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Kimenet:

HTML táblázat szélessége:

A HTML tábla szélességét a segítségével adhatjuk meg CSS szélesség ingatlan. Megadható pixelben vagy százalékban.

Az asztal szélességét igényünk szerint állíthatjuk be. A következő példa a táblázat szélességű megjelenítésére szolgál.

 table{ width: 100%; } 

Példa:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Kimenet:

HTML-tábla colspan-val

Ha egy cellát egynél több oszlopra szeretne beállítani, használhatja a colspan attribútumot.

Egy cellát/sort több oszlopra oszt, és az oszlopok száma a colspan attribútum értékétől függ.

Lássuk a példát, amely két oszlopot ölel fel.

CSS kód:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

HTML kód:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Kimenet:

string formátum

HTML táblázat sortávolsággal

Ha egy cellát egynél több sort szeretne kiteríteni, használhatja a rowspan attribútumot.

Egy cellát több sorra oszt fel. A felosztott sorok száma a sorhossz értékektől függ.

Lássuk a példát, amely két sort ível át.

CSS kód:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

HTML kód:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Kimenet:

HTML táblázat felirattal

A HTML felirat a táblázat felett jelenik meg. Csak a táblázat címke után szabad használni.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

A HTML-tábla páros és páratlan celláinak stílusa

CSS kód:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Kimenet:

MEGJEGYZÉS: Különféle típusú táblázatokat is létrehozhat a táblázat különböző CSS-tulajdonságaival.

Támogatott böngészők

Elem	Króm	AZAZ	Firefox	Opera	Szafari
	Igen	Igen	Igen	Igen	Igen