Znacznik tabeli HTML służy do wyświetlania danych w formie tabelarycznej (wiersz * kolumna). Może być wiele kolumn w rzędzie.

Możemy utworzyć tabelę do wyświetlania danych w formie tabelarycznej za pomocą

W każdej tabeli wiersz tabeli jest zdefiniowany przeztag, nagłówek tabeli jest zdefiniowany przez, a dane tabeli są zdefiniowane przeztagi.

Tabele HTML służą do zarządzania układem strony m.in. sekcja nagłówka, pasek nawigacyjny, treść, sekcja stopki itp. Zaleca się jednak używanie znacznika div nad tabelą w celu zarządzania układem strony.

Tagi tabeli HTML

Przykład tabeli HTML

Zobaczmy przykład tagu tabeli HTML. Wyniki pokazano powyżej.

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

Wyjście:

ile jest tam owoców

W powyższej tabeli HTML znajduje się 5 wierszy i 3 kolumny = 5 * 3 = 15 wartości.

Tabela HTML z obramowaniem

Istnieją dwa sposoby określania obramowania tabel HTML.

1. Według atrybutu granicznego tabeli w formacie HTML
2. Według właściwości granicznej w CSS

1) Atrybut obramowania HTML

Aby określić granicę, możesz użyć atrybutu border znacznika tabeli w HTML. Ale teraz nie jest to zalecane.

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

Wyjście:

2) Właściwość CSS Border

Obecnie zaleca się użycie właściwości border CSS do określenia granicy w tabeli.

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

Możesz zwinąć wszystkie obramowania w jednym obramowaniu, korzystając z właściwości border-collapse. Spowoduje to zwinięcie granicy w jedną.

kod Fibonacciego w Javie

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

Wyjście:

Tabela HTML z dopełnieniem komórek

Dopełnienie nagłówka tabeli i danych tabeli można określić na dwa sposoby:

1. Przez dodanie atrybutu tabeli w formacie HTML
2. Dopełniając właściwość w CSS

Atrybut cellpadding znacznika tabeli HTML jest już przestarzały. Zalecane jest użycie CSS. Zobaczmy więc kod CSS.

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

Wyjście:

Szerokość tabeli HTML:

Możemy określić szerokość tabeli HTML za pomocą Szerokość CSS nieruchomość. Można go określić w pikselach lub procentach.

Możemy dostosować szerokość stołu zgodnie z naszymi wymaganiami. Poniżej znajduje się przykład wyświetlania tabeli o szerokości.

 table{ width: 100%; } 

Przykład:

 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> 

Wyjście:

Tabela HTML z colspan

Jeśli chcesz, aby komórka obejmowała więcej niż jedną kolumnę, możesz użyć atrybutu colspan.

Podzieli jedną komórkę/wiersz na wiele kolumn, a liczba kolumn zależy od wartości atrybutu colspan.

Zobaczmy przykład obejmujący dwie kolumny.

Kod CSS:

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

Kod HTML:

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

Wyjście:

zainstaluj mavena

Tabela HTML z rozpiętością wierszy

Jeśli chcesz, aby komórka obejmowała więcej niż jeden wiersz, możesz użyć atrybutu rowspan.

Podzieli komórkę na wiele wierszy. Liczba podzielonych wierszy będzie zależała od wartości rozpiętości wierszy.

Zobaczmy przykład obejmujący dwa wiersze.

Kod CSS:

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

Kod HTML:

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

Wyjście:

Tabela HTML z podpisem

Nad tabelą wyświetlany jest podpis HTML. Należy go używać wyłącznie po tagu tabeli.

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

Stylizacja komórek parzystych i nieparzystych tabeli HTML

Kod CSS:

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

Wyjście:

UWAGA: Możesz także tworzyć różne typy tabel, korzystając z różnych właściwości CSS w swojej tabeli.

Obsługiwane przeglądarki

Element	Chrom	TJ	Firefoksa	Opera	Safari
	Tak	Tak	Tak	Tak	Tak