HTML tag tabulky slouží k zobrazení dat v tabulkové formě (řádek * sloupec). Může být mnoho sloupců v řadě.

Můžeme vytvořit tabulku pro zobrazení dat v tabulkové formě pomocí

V každé tabulce je řádek tabulky definován pomocítag, záhlaví tabulky je definovánoa data tabulky jsou definována pomocíznačky.

HTML tabulky se používají ke správě rozvržení stránky, např. sekce záhlaví, navigační lišta, obsah těla, sekce zápatí atd. Pro správu rozvržení stránky se však doporučuje používat tag div nad tabulkou.

Tagy tabulky HTML

Příklad HTML tabulky

Podívejme se na příklad značky HTML tabulky. Jeho výstup je zobrazen výše.

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

Výstup:

reakční tabulka

Ve výše uvedené html tabulce je 5 řádků a 3 sloupce = 5 * 3 = 15 hodnot.

HTML tabulka s okrajem

Existují dva způsoby, jak určit ohraničení pro HTML tabulky.

1. Podle atributu border tabulky v HTML
2. Podle vlastnosti border v CSS

1) Atribut HTML Border

K určení hranice můžete použít atribut border tagu tabulky v HTML. Teď se to ale nedoporučuje.

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

Výstup:

2) Vlastnost CSS Border

Nyní se doporučuje použít vlastnost border CSS pro specifikaci border v tabulce.

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

Pomocí vlastnosti border-collapse můžete sbalit všechna ohraničení v jednom ohraničení. Zhroutí hranici v jednu.

strsep

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

Výstup:

HTML tabulka s odsazením buněk

Výplň pro záhlaví tabulky a data tabulky můžete určit dvěma způsoby:

1. Pomocí atributu cellpadding tabulky v HTML
2. Pomocí odsazení vlastnosti v CSS

Atribut cellpadding značky HTML tabulky je nyní zastaralý. Doporučuje se používat CSS. Pojďme se tedy podívat na kód CSS.

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

Výstup:

Šířka HTML tabulky:

Šířku HTML tabulky můžeme určit pomocí Šířka CSS vlastnictví. Může být specifikován v pixelech nebo procentech.

Šířku stolu můžeme upravit podle našich požadavků. Následuje příklad zobrazení tabulky se šířkou.

 table{ width: 100%; } 

Pří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> 

Výstup:

HTML tabulka s colspan

Pokud chcete, aby buňka zahrnovala více než jeden sloupec, můžete použít atribut colspan.

Rozdělí jednu buňku/řádek do více sloupců a počet sloupců závisí na hodnotě atributu colspan.

Podívejme se na příklad, který zahrnuje dva sloupce.

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> 

Výstup:

HTML tabulka s rozpětím řádků

Pokud chcete, aby se buňka rozkládala na více než jeden řádek, můžete použít atribut rowspan.

Rozdělí buňku do více řádků. Počet rozdělených řádků bude záviset na hodnotách rowspan.

Podívejme se na příklad, který zahrnuje dva řádky.

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> 

Výstup:

HTML tabulka s titulkem

HTML titulek je zobrazen nad tabulkou. Musí být použit pouze po označení tabulky.

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

Stylování sudých a lichých buněk tabulky HTML

CSS kód:

pokud podle rudyarda kiplinga shrnutí

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

Výstup:

POZNÁMKA: Můžete také vytvářet různé typy tabulek pomocí různých vlastností CSS v tabulce.

Podporované prohlížeče

Živel	Chrome	TJ	Firefox	Opera	Safari
	Ano	Ano	Ano	Ano	Ano