En tabell er en viktig komponent i HTML for å vise data i et strukturert format med rader og kolonner. I HTML lages tabeller ved å bruke <table>-, <tr>- og <td>-taggene.
<table>-koden representerer hovedtabellbeholderen, som inneholder alle radene og kolonnene. Rader er definert ved hjelp av <tr>(tabellrad)-taggen, mens celler i radene er definert ved hjelp av <td>(tabelldata)-taggen. I tillegg kan du bruke <th>(tabelloverskrift)-taggen for å definere overskriftsceller for tabellen.
Du kan bruke attributter som colspan og rowspan for å slå sammen celler i tabellen eller spenne over celler på tvers av flere rader og kolonner. Videre kan du bruke CSS-egenskaper for å tilpasse utseendet og layouten til tabellen.
Tabell( <table>)
- <table> Elementet brukes til å lage en tabell i HTML.
- Data plasseres i rader( <tr>) og kolonner( <td> eller <th>).
- Hver datacelle er plassert innenfor <td>(datacelle) eller <th>(overskriftscelle) 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 brukes til å lage kolonneoverskrifter i en tabell.
- Vanligvis plassert i den første raden i tabellen.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Datarader( <tr>):
- <tr> Elementet brukes til å lage datarader i en tabell.
- Dataceller( <td>) eller overskriftsceller( <th>) er plassert innenfor disse <tr> elementene.
<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>
Kolonnespenning( colspan)
Attributtet colspan brukes til å bestemme antall kolonner som en datacelle eller overskriftscelle vil spenne over i tabellen.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Radspenning( rowspan)
Attributtet rowspan brukes til å bestemme antall rader som en datacelle eller overskriftscelle vil spenne 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>
Slår sammen celler( colspan og rowspan)
Du kan kombinere både colspan og rowspan attributter for å slå sammen celler i en tabell.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border eiendom
- border Egenskapen spesifiserer tykkelsen på bordkanten.
- Verdien av border er et ikke-negativt heltall.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding eiendom
-, cellpadding Egenskapen spesifiserer avstanden mellom celleinnholdet og kanten til cellen i tabellen.
- Verdien av cellpadding er et ikke-negativt heltall
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing eiendom
- cellspacing Egenskapen spesifiserer avstanden mellom cellene i tabellen.
- Verdien av cellspacing er et ikke-negativt heltall.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Disse attributtene og elementene lar deg lage og tilpasse tabeller i HTML i henhold til dine behov. Du kan bruke dem til å vise data på en oversiktlig og organisert måte på nettstedet ditt.