close

Tabeller i HTML: En guide till att skapa och formatera tabeller i HTML

En tabell är en viktig komponent i HTML för att visa data i ett strukturerat format med rader och kolumner. I HTML skapas tabeller med taggarna <table>, <tr> och <td>.

Taggen <table> representerar huvudtabellbehållaren, som innehåller alla rader och kolumner. Rader definieras med taggen <tr>(tabellrad), medan celler inom raderna definieras med taggen <td>(tabelldata). Dessutom kan du använda taggen <th>(tabellhuvud) för att definiera rubrikceller för tabellen.

Du kan använda attribut som colspan och rowspan för att slå samman celler i tabellen eller spänna över celler över flera rader och kolumner. Dessutom kan du använda CSS-egenskaper för att anpassa utseendet och layouten för tabellen.

 

Tabell( <table>)

- <table> Elementet används för att skapa en tabell i HTML.

- Data placeras i rader( <tr>) och kolumner( <td> eller <th>).

- Varje datacell placeras inom <td>(datacell) eller <th>(huvudcell) element.

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

 

Kolumnrubrik( <th>)

- Elementet <th> används för att skapa kolumnrubriker i en tabell.

- Vanligtvis placerad i den första raden i tabellen.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>

 

Datarader( <tr>):

- Elementet <tr> används för att skapa datarader i en tabell.

- Dataceller( <td>) eller rubrikceller( <th>) placeras inom dessa <tr> element.

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

 

Kolumnspaning( colspan)

Attributet colspan används för att bestämma antalet kolumner som en datacell eller rubrikcell spänner över i tabellen.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>

 

Radspaning( rowspan)

Attributet rowspan används för att bestämma antalet rader som en datacell eller rubrikcell kommer att sträcka sig över 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 ihop celler( colspan och rowspan)

Du kan kombinera både colspan och rowspan attribut för att slå samman 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 fast egendom

- border Egenskapen anger tjockleken på bordskanten.

- Värdet på border är ett icke-negativt heltal.

<table border="1">  
<!-- Table rows and columns -->  
</table>

 

cellpadding fast egendom

-, cellpadding Egenskapen anger avståndet mellan cellinnehållet och kanten på cellen i tabellen.

- Värdet på cellpadding är ett icke-negativt heltal 

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>

 

cellspacing fast egendom

- cellspacing Egenskapen anger avståndet mellan cellerna i tabellen.

- Värdet på cellspacing är ett icke-negativt heltal.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>

 

Dessa attribut och element låter dig skapa och anpassa tabeller i HTML efter dina behov. Du kan använda dem för att visa data på ett tydligt och organiserat sätt på din webbplats.