HTML TABUĽKA - HTML NÁVOD

HTML tag tabuľky slúži na zobrazenie údajov v tabuľkovej forme (riadok * stĺpec). V rade môže byť veľa stĺpcov.

Môžeme vytvoriť tabuľku na zobrazenie údajov v tabuľkovej forme pomocou

prvku, s pomocou,

, a	prvkov.

V každej tabuľke je riadok tabuľky definovaný pomocoutag, hlavička tabuľky je definovanáa údaje tabuľky sú definované pomocouznačky.

HTML tabuľky slúžia na správu rozloženia stránky napr. sekcia hlavičky, navigačný panel, obsah tela, sekcia päty atď. Na správu rozloženia stránky sa však odporúča použiť značku div nad tabuľkou.

Tagy tabuľky HTML

Tag

Popis

Definuje tabuľku.

Definuje riadok v tabuľke.

Definuje bunku hlavičky v tabuľke.

Definuje bunku v tabuľke.

Definuje popis tabuľky.

Určuje skupinu jedného alebo viacerých stĺpcov v tabuľke na formátovanie.

Používa sa s prvkom na určenie vlastností stĺpca pre každý stĺpec.

Používa sa na zoskupenie obsahu tela do tabuľky.

Používa sa na zoskupenie obsahu hlavičky do tabuľky.

Používa sa na zoskupenie obsahu päty do tabuľky.

Príklad HTML tabuľky

Pozrime sa na príklad značky HTML tabuľky. Jeho výstup je zobrazený vyššie.

 <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>

Vyskúšajte to

Výkon:

strojopis každý

Krstné meno	Priezvisko	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Pohyb	Singh	72

Vo vyššie uvedenej html tabuľke je 5 riadkov a 3 stĺpce = 5 * 3 = 15 hodnôt.

HTML tabuľka s okrajom

Existujú dva spôsoby, ako určiť orámovanie pre HTML tabuľky.

Podľa atribútu border tabuľky v HTML
Podľa vlastnosti border v CSS

1) Atribút HTML Border

Na určenie okraja môžete použiť atribút border značky tabuľky v HTML. Ale teraz sa to neodporúča.

 <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>

Vyskúšajte to

Výkon:

Krstné meno	Priezvisko	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Pohyb	Singh	72

2) Vlastnosť CSS Border

Teraz sa odporúča použiť vlastnosť border CSS na určenie hranice v tabuľke.

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

Vyskúšajte to

Pomocou vlastnosti border-collapse môžete zbaliť všetky hranice v jednej hranici. Zrúti hranicu do jednej.

vracajúce polia v jazyku Java

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

Vyskúšajte to

Výkon:

názov	Priezvisko	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Pohyb	Singh	72

HTML tabuľka s výplňou buniek

Výplň pre hlavičku tabuľky a údaje tabuľky môžete určiť dvoma spôsobmi:

Podľa atribútu cellpadding tabuľky v HTML
Vyplnením vlastnosti v CSS

Atribút cellpadding značky HTML tabuľky je už zastaraný. Odporúča sa použiť CSS. Pozrime sa teda na kód CSS.

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

Vyskúšajte to

Výkon:

názov	Priezvisko	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Pohyb	Singh	72

Šírka HTML tabuľky:

Šírku HTML tabuľky môžeme určiť pomocou Šírka CSS nehnuteľnosť. Môže byť špecifikovaný v pixeloch alebo percentách.

Šírku stola vieme upraviť podľa našich požiadaviek. Nasleduje príklad zobrazenia tabuľky so šírkou.

 table{ width: 100%; }

Príklad:

 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>

Vyskúšajte to

Výkon:

HTML tabuľka s colspan

Ak chcete, aby bunka zahŕňala viac ako jeden stĺpec, môžete použiť atribút colspan.

Rozdelí jednu bunku/riadok do viacerých stĺpcov a počet stĺpcov závisí od hodnoty atribútu colspan.

Pozrime sa na príklad, ktorý zahŕňa dva stĺpce.

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>

Vyskúšajte to

Výkon:

názov	Mobilné číslo.
Ajeet Maurya	7503520801	9555879135

Tabuľka HTML s riadkom

Ak chcete, aby bunka obsahovala viac ako jeden riadok, môžete použiť atribút rowspan.

Rozdelí bunku do viacerých riadkov. Počet rozdelených riadkov bude závisieť od hodnôt rowspan.

Pozrime sa na príklad, ktorý zahŕňa dva riadky.

CSS kód:

binárne vyhľadávanie

 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>

Vyskúšajte to

Výkon:

názov	Ajeet Maurya
Mobilné číslo.	7503520801
9555879135

HTML tabuľka s popisom

HTML titulok je zobrazený nad tabuľkou. Musí sa použiť iba po označení tabuľky.

 <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>

Vyskúšajte to

Úprava štýlu párnych a nepárnych buniek tabuľky HTML

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; }

Vyskúšajte to

Výkon:

POZNÁMKA: Môžete tiež vytvoriť rôzne typy tabuliek pomocou rôznych vlastností CSS v tabuľke.

Podporné prehliadače

Element

Chrome

Firefox

Opera

Safari

Áno