Oznaka tabele HTML se uporablja za prikaz podatkov v obliki tabele (vrstica * stolpec). V vrsti je lahko več stolpcev.

Ustvarimo lahko tabelo za prikaz podatkov v obliki tabele z uporabo

V vsaki tabeli je vrstica tabele definirana zoznako, glavo tabele definira, podatke tabele pa določaoznake.

Tabele HTML se uporabljajo za upravljanje postavitve strani, npr. razdelek glave, vrstica za krmarjenje, vsebina telesa, razdelek noge itd. Vendar je priporočljivo, da uporabite oznako div nad tabelo za upravljanje postavitve strani.

Oznake tabele HTML

Primer tabele HTML

Oglejmo si primer oznake tabele HTML. Izhod je prikazan zgoraj.

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

Izhod:

niz java indexof

V zgornji tabeli html je 5 vrstic in 3 stolpci = 5 * 3 = 15 vrednosti.

Tabela HTML z obrobo

Obrobo za tabele HTML lahko določite na dva načina.

1. Po atributu obrobe tabele v HTML
2. Z mejno lastnostjo v CSS

1) Atribut obrobe HTML

Za določitev obrobe lahko uporabite atribut obrobe oznake tabele v HTML. Ampak zdaj ni priporočljivo.

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

Izhod:

2) Lastnost meje CSS

Zdaj je priporočljivo uporabiti lastnost obrobe CSS za določitev obrobe v tabeli.

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

Vse obrobe v eni obrobi lahko strnete z lastnostjo border-collapse. Mejo bo strnila v eno.

nadzorne strukture python

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

Izhod:

Tabela HTML z oblazinjenjem celic

Oblazinjenje za glavo tabele in podatke tabele lahko določite na dva načina:

1. Z atributom cellpadding tabele v HTML
2. Z lastnostjo oblazinjenja v CSS

Atribut cellpadding oznake tabele HTML je zdaj zastarel. Priporočljiva je uporaba CSS. Poglejmo torej kodo CSS.

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

Izhod:

Širina tabele HTML:

Širino tabele HTML lahko določimo z uporabo širina CSS premoženje. Lahko se določi v slikovnih pikah ali odstotkih.

Širino mize lahko prilagodimo glede na naše zahteve. Sledi primer prikaza tabele s širino.

 table{ width: 100%; } 

primer:

 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> 

Izhod:

Tabela HTML s colspanom

Če želite, da celica obsega več kot en stolpec, lahko uporabite atribut colspan.

Eno celico/vrstico bo razdelil na več stolpcev, število stolpcev pa je odvisno od vrednosti atributa colspan.

Oglejmo si primer, ki zajema dva stolpca.

Koda CSS:

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

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

Izhod:

Tabela HTML z razponom vrstic

Če želite, da celica zajema več kot eno vrstico, lahko uporabite atribut rowspan.

Celico bo razdelil na več vrstic. Število razdeljenih vrstic bo odvisno od vrednosti razpona vrstic.

Oglejmo si primer, ki obsega dve vrstici.

Koda CSS:

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

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

Izhod:

Tabela HTML z napisom

HTML napis je prikazan nad tabelo. Uporabiti ga je treba samo za oznako tabele.

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

Oblikovanje sodih in lihih celic tabele HTML

Koda CSS:

if else izjava java

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

Izhod:

OPOMBA: Ustvarite lahko tudi različne vrste tabel z uporabo različnih lastnosti CSS v tabeli.

Podprti brskalniki

Element	Chrome	IE	Firefox	Opera	Safari
	ja	ja	ja	ja	ja