close

Tabeller i HTML: En veiledning for å lage og formatere tabeller i HTML

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.