HTML-tabeltag wordt gebruikt om gegevens in tabelvorm weer te geven (rij * kolom). Er kunnen veel kolommen op een rij staan.

We kunnen een tabel maken om gegevens in tabelvorm weer te geven met behulp van

In elke tabel wordt de tabelrij gedefinieerd doortag, tabelkop wordt gedefinieerd door, en tabelgegevens worden gedefinieerd doorlabels.

HTML-tabellen worden gebruikt om de lay-out van de pagina te beheren, b.v. koptekstsectie, navigatiebalk, hoofdinhoud, voettekstsectie enz. Maar het wordt aanbevolen om de div-tag over de tabel te gebruiken om de lay-out van de pagina te beheren.

HTML-tabeltags

HTML-tabelvoorbeeld

Laten we het voorbeeld van een HTML-tabeltag bekijken. De uitvoer wordt hierboven weergegeven.

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

Uitgang:

wat is een hashset in Java

In de bovenstaande HTML-tabel zijn er 5 rijen en 3 kolommen = 5 * 3 = 15 waarden.

HTML-tabel met rand

Er zijn twee manieren om een ​​rand voor HTML-tabellen op te geven.

1. Op randattribuut van tabel in HTML
2. Op border-eigenschap in CSS

1) HTML Border-kenmerk

U kunt het border-attribuut van de tabeltag in HTML gebruiken om de rand te specificeren. Maar het wordt nu niet aanbevolen.

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

Uitgang:

2) CSS Border-eigenschap

Het wordt nu aanbevolen om de eigenschap border van CSS te gebruiken om de rand in de tabel op te geven.

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

U kunt alle randen in één rand samenvouwen met de eigenschap border-collapse. Het zal de grens in één doen samenvallen.

hoeveel MB in een GB

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

Uitgang:

HTML-tabel met celopvulling

U kunt op twee manieren opvulling voor tabelkopteksten en tabelgegevens opgeven:

1. Door het attribuut van de tabel in HTML op te vullen met cellen
2. Door de eigenschap op te vullen in CSS

Het cellpadding-attribuut van de HTML-tabeltag is nu verouderd. Het wordt aanbevolen om CSS te gebruiken. Laten we dus de code van CSS bekijken.

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

Uitgang:

HTML-tabelbreedte:

We kunnen de breedte van de HTML-tabel opgeven met behulp van de CSS-breedte eigendom. Dit kan worden opgegeven in pixels of percentage.

We kunnen onze tafelbreedte aanpassen aan onze vereisten. Hieronder volgt een voorbeeld voor het weergeven van een tabel met breedte.

 table{ width: 100%; } 

Voorbeeld:

 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> 

Uitgang:

HTML-tabel met colspan

Als u een cel meer dan één kolom wilt laten omspannen, kunt u het colspan-attribuut gebruiken.

Het verdeelt één cel/rij in meerdere kolommen, en het aantal kolommen is afhankelijk van de waarde van het colspan-attribuut.

Laten we het voorbeeld bekijken dat twee kolommen omvat.

CSS-code:

java anders als

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

HTML code:

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

Uitgang:

HTML-tabel met rijspanwijdte

Als u wilt dat een cel meer dan één rij beslaat, kunt u het kenmerk rowspan gebruiken.

Het verdeelt een cel in meerdere rijen. Het aantal verdeelde rijen is afhankelijk van de rijspanwaarden.

Laten we het voorbeeld bekijken dat twee rijen beslaat.

CSS-code:

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

HTML code:

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

Uitgang:

HTML-tabel met bijschrift

HTML-bijschrift wordt boven de tabel weergegeven. Het mag alleen na de tabeltag worden gebruikt.

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

HTML-tabel even en oneven cellen opmaken

CSS-code:

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

Uitgang:

OPMERKING: U kunt ook verschillende soorten tabellen maken met behulp van verschillende CSS-eigenschappen in uw tabel.

Ondersteunende browsers

Element	Chroom	D.W.Z	Firefox	Opera	Safari
	Ja	Ja	Ja	Ja	Ja