En tabel er en væsentlig komponent i HTML til at vise data i et struktureret format med rækker og kolonner. I HTML oprettes tabeller ved hjælp af tags <table>, <tr> og <td>.
<table>-tagget repræsenterer hovedtabelcontaineren, som indeholder alle rækker og kolonner. Rækker defineres ved hjælp af tagget <tr>(tabelrække), mens celler i rækkerne defineres ved hjælp af tagget <td>(tabeldata). Derudover kan du bruge tagget <th>(tabeloverskrift) til at definere overskriftsceller for tabellen.
Du kan bruge attributter som colspan og rowspan til at flette celler i tabellen eller spænde celler på tværs af flere rækker og kolonner. Desuden kan du anvende CSS-egenskaber for at tilpasse udseendet og layoutet af tabellen.
Tabel( <table>)
- <table> Elementet bruges til at lave en tabel i HTML.
- Data placeres i rækker( <tr>) og kolonner( <td> eller <th>).
- Hver datacelle er placeret i <td>(datacelle) eller <th>(headercelle) elementer.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Kolonneoverskrift( <th>)
- <th> Elementet bruges til at oprette kolonneoverskrifter i en tabel.
- Placeres typisk i første række af bordet.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Datarækker( <tr>):
- <tr> Elementet bruges til at oprette datarækker i en tabel.
- Dataceller( <td>) eller overskriftsceller( <th>) er placeret i disse <tr> elementer.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Kolonnespænding( colspan)
Attributten colspan bruges til at bestemme antallet af kolonner, som en datacelle eller overskriftscelle vil spænde over i tabellen.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Rækkespænding( rowspan)
Attributten rowspan bruges til at bestemme antallet af rækker, som en datacelle eller overskriftscelle vil spænde over i tabellen.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Fletning af celler( colspan og rowspan)
Du kan kombinere både colspan og rowspan attributter for at flette celler i en tabel.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border ejendom
- border Egenskaben angiver tykkelsen af bordrammen.
- Værdien af border er et ikke-negativt heltal.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding ejendom
-, cellpadding Egenskaben angiver afstanden mellem celleindholdet og kanten af cellen i tabellen.
- Værdien af cellpadding er et ikke-negativt heltal
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing ejendom
- cellspacing Egenskaben angiver afstanden mellem celler i tabellen.
- Værdien af cellspacing er et ikke-negativt heltal.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Disse attributter og elementer giver dig mulighed for at oprette og tilpasse tabeller i HTML efter dine behov. Du kan bruge dem til at vise data på en overskuelig og organiseret måde på din hjemmeside.