Tabel HTML pentru tabel este utilizat pentru afișarea datelor în formă tabelară (rând * coloană). Pot fi multe coloane pe rând.

Putem crea un tabel pentru a afișa datele în formă tabelară, folosind

În fiecare tabel, rândul tabelului este definit deetichetă, antetul tabelului este definit de, iar datele din tabel sunt definite deEtichete.

Tabelele HTML sunt folosite pentru a gestiona aspectul paginii, de ex. secțiunea antet, bara de navigare, conținutul corpului, secțiunea subsol etc. Dar este recomandat să utilizați eticheta div peste tabel pentru a gestiona aspectul paginii.

Etichete de tabel HTML

Exemplu de tabel HTML

Să vedem exemplul etichetei de tabel HTML. Ieșirea este afișată mai sus.

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

Ieșire:

arraylist

În tabelul html de mai sus, există 5 rânduri și 3 coloane = 5 * 3 = 15 valori.

Tabel HTML cu chenar

Există două moduri de a specifica chenarul pentru tabelele HTML.

1. După atributul de margine al tabelului în HTML
2. Prin proprietate de frontieră în CSS

1) Atribut HTML Border

Puteți utiliza atributul chenar al etichetei tabelului în HTML pentru a specifica chenar. Dar nu este recomandat acum.

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

Ieșire:

2) Proprietatea CSS Border

Acum este recomandat să folosiți proprietatea border a CSS pentru a specifica chenarul în tabel.

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

Puteți restrânge toate marginile dintr-un singur chenar prin proprietatea border-collapse. Va prăbuși granița într-una singură.

pseudocod java

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

Ieșire:

Tabel HTML cu umplutură de celule

Puteți specifica completarea pentru antetul tabelului și datele tabelului în două moduri:

1. Prin atributul cellpadding al tabelului în HTML
2. Prin completarea proprietății în CSS

Atributul cellpadding al etichetei tabelului HTML este obselet acum. Se recomandă utilizarea CSS. Deci, să vedem codul CSS.

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

Ieșire:

Lățimea tabelului HTML:

Putem specifica lățimea tabelului HTML folosind Lățimea CSS proprietate. Poate fi specificat în pixeli sau procent.

Ne putem ajusta lățimea mesei conform cerințelor noastre. Următorul este exemplul de afișare a tabelului cu lățime.

 table{ width: 100%; } 

Exemplu:

 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> 

Ieșire:

Tabel HTML cu colspan

Dacă doriți ca o celulă să se întinde pe mai multe coloane, puteți utiliza atributul colspan.

Va împărți o celulă/rând în mai multe coloane, iar numărul de coloane depinde de valoarea atributului colspan.

Să vedem exemplul care se întinde pe două coloane.

Cod CSS:

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

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

Ieșire:

repl în java

Tabel HTML cu interval de rânduri

Dacă doriți să faceți ca o celulă să se întinde pe mai mult de un rând, puteți utiliza atributul rowspan.

Va împărți o celulă în mai multe rânduri. Numărul de rânduri împărțite va depinde de valorile intervalului de rânduri.

Să vedem exemplul care se întinde pe două rânduri.

Cod CSS:

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

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

Ieșire:

Tabel HTML cu legenda

Subtitrarea HTML este afișată deasupra tabelului. Trebuie folosit numai după eticheta de masă.

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

Stilul tabelului HTML pentru celule pare și impare

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

Ieșire:

NOTĂ: De asemenea, puteți crea diferite tipuri de tabele folosind diferite proprietăți CSS din tabelul dvs.

Suport pentru browsere

Element	Crom	IE	Firefox	Operă	Safari
	da	da	da	da	da