HTML oznaka tablice služi za prikaz podataka u tabelarnom obliku (redak * stupac). Može biti mnogo stupaca u nizu.

Možemo izraditi tablicu za prikaz podataka u tabelarnom obliku, koristeći

U svakoj tablici redak tablice definiran jeoznaku, zaglavlje tablice definira, a podatke tablice definiraoznake.

HTML tablice koriste se za upravljanje izgledom stranice, npr. odjeljak zaglavlja, navigacijska traka, sadržaj tijela, odjeljak podnožja itd. Ali preporučuje se korištenje div oznake iznad tablice za upravljanje izgledom stranice.

Oznake HTML tablice

Primjer HTML tablice

Pogledajmo primjer oznake HTML tablice. Izlaz je prikazan gore.

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

Izlaz:

int u string c++

U gornjoj html tablici postoji 5 redaka i 3 stupca = 5 * 3 = 15 vrijednosti.

HTML tablica s rubom

Postoje dva načina za određivanje granice za HTML tablice.

1. Po rubnom atributu tablice u HTML-u
2. Svojstvom granice u CSS-u

1) HTML atribut granice

Možete upotrijebiti atribut border oznake tablice u HTML-u da odredite rub. Ali sada se ne preporuč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> 

Izlaz:

2) Svojstvo granice CSS-a

Sada se preporučuje korištenje svojstva granice CSS-a za određivanje granice u tablici.

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

Svojstvom border-collapse možete sažeti sve obrube u jednom obrubu. Srušit će granicu u jednu.

linux mint cimet vs mate

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

Izlaz:

HTML tablica s punjenjem ćelija

Ispunu za zaglavlje tablice i podatke tablice možete odrediti na dva načina:

1. Pomoću atributa cellpadding tablice u HTML-u
2. Svojstvom padding u CSS-u

Atribut cellpadding oznake HTML tablice sada je zastario. Preporučljivo je koristiti CSS. Pa da vidimo kod CSS-a.

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

Izlaz:

Širina HTML tablice:

Možemo odrediti širinu HTML tablice pomoću CSS širina vlasništvo. Može se odrediti u pikselima ili postocima.

Možemo prilagoditi širinu stola prema našim zahtjevima. Slijedi primjer za prikaz tablice sa širinom.

 table{ width: 100%; } 

Primjer:

 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> 

Izlaz:

HTML tablica s colspanom

Ako želite da ćelija obuhvaća više od jednog stupca, možete koristiti atribut colspan.

Podijelit će jednu ćeliju/redak u više stupaca, a broj stupaca ovisi o vrijednosti atributa colspan.

Pogledajmo primjer koji obuhvaća dva stupca.

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> 

Izlaz:

HTML tablica s rasponom redova

Ako želite da ćelija obuhvaća više od jednog retka, možete koristiti atribut rowspan.

Podijelit će ćeliju u više redaka. Broj podijeljenih redaka ovisit će o vrijednostima raspona redova.

Pogledajmo primjer koji se proteže kroz dva reda.

CSS kôd:

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

HTML kôd:

preuzimanje youtube videa vlc

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

Izlaz:

HTML tablica s natpisom

HTML naslov prikazan je iznad tablice. Mora se koristiti samo nakon oznake tablice.

 <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 parnih i neparnih ćelija HTML tablice

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

Izlaz:

NAPOMENA: Također možete stvoriti različite vrste tablica koristeći različita CSS svojstva u vašoj tablici.

Podržava preglednike

Element	Krom	tj	Firefox	Opera	Safari
	Da	Da	Da	Da	Da