HTML-tabeller

Du kan skapa tabeller med HTML.

Exempel

Tabell
Detta exempel visar hur man skapar tabeller i ett HTML-dokument.
Tabellram
Detta exempel visar olika typer av tabellramar.

(Du kan hitta fler exempel på sidans nederkant)

Tabell

En tabell definieras med <table>-taggen. Varje tabell har flera rader (definierade med <tr>-taggen), och varje rad delas upp i flera celler (definierade med <td>-taggen). Bokstaven td betyder tabelldata (table data), dvs innehållet i datacellen. Dataceller kan innehålla text, bilder, listor, stycken, formulär, horisontella linjer, tabeller och mycket mer.

<table border="1">
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>
<tr>
<td>rad 2, cell 1</td>
<td>rad 2, cell 2</td>
</tr>
</table>

Visas i webbläsaren som följer:

rad 1, cell 1 rad 1, cell 2
rad 2, cell 1 rad 2, cell 2

Tabeller och ramegenskap

Om du inte definierar ramegenskapen kommer tabellen inte att visa ramen. Detta kan vara användbart ibland, men de flesta gånger vill vi visa ramen.

Använd ramegenskapen för att visa en tabell med ram:

<table border="1">
<tr>
<td>Rad 1, cell 1</td>
<td>Rad 1, cell 2</td>
</tr>
</table>

Tabellens rubrik

Tabellens rubrik definieras med <th>-taggen.

De flesta webbläsare visar rubriker som fet, centrerad text:

<table border="1">
<tr>
<th>Rubrik</th>
<th>En annan rubrik</th>
</tr>
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>
<tr>
<td>rad 2, cell 1</td>
<td>rad 2, cell 2</td>
</tr>
</table>

Visas i webbläsaren som följer:

Rubrik En annan rubrik
rad 1, cell 1 rad 1, cell 2
rad 2, cell 1 rad 2, cell 2

Tomrads i tabellen

I vissa webbläsare visas celler utan innehåll inte bra. Om en cell är tom (utan innehåll) kan webbläsaren inte visa ramen för denna cell.

<table border="1">
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>rad 2, cell 2</td>
</tr>
</table>

Webbläsaren kan visa det så här:

Tomrads i tabellen

Observera:Den tomma cellens ram visas inte. För att undvika detta kan du lägga till en tom platsmarkör i den tomma cellen för att visa ramen.

<table border="1">
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>rad 2, cell 2</td>
</tr>
</table>

Visas i webbläsaren som följer:

rad 1, cell 1 rad 1, cell 2
　 rad 2, cell 2

Fler exempel

Tabell utan ram
Detta exempel visar en tabell utan ram.
Rubrik i tabellen (Heading)
Detta exempel visar hur man visar tabellens rubrik.
Tomma celler
Detta exempel visar hur man hanterar celler utan innehåll med " ".
Tabell med titel
Detta exempel visar en tabell med titel (caption).
Tabellceller som sträcker sig över flera rader eller kolumner
Detta exempel visar hur man definierar tabellceller som sträcker sig över flera rader eller kolumner.
Tabellmärken
Detta exempel visar hur man visar element inom olika element.
Cellmarginal (Cell padding)
Detta exempel visar hur man använder Cell padding för att skapa en tom yta mellan cellinnehållet och ramen.
Cellmarginal (Cell spacing)
Detta exempel visar hur man använder Cell spacing för att öka avståndet mellan celler.
Lägg till bakgrundsfärg eller bakgrundsbild till tabellen
Detta exempel visar hur man lägger till bakgrund till tabellen.
Lägg till bakgrundsfärg eller bakgrundsbild till tabellceller
Detta exempel visar hur man lägger till bakgrund till en eller flera tabellceller.
Placera innehåll i tabellceller
Detta exempel visar hur man använder "align"-egenskapen för att placera cellinnehållet så att en vacker tabell skapas.
Ram(frame)-egenskap
Detta exempel visar hur man använder "frame"-egenskapen för att kontrollera ramen runt tabellen.

Tabelltaggar

Tabell Beskrivning
<table> Definiera tabell.
<caption> Definiera tabellens titel.
<th> Definiera tabellens rubrik.
<tr> Definiera tabellens rad.
<td> Definiera tabellcellen.
<thead> Definiera tabellens rubrik.
<tbody> Definiera tabellens kropp.
<tfoot> Definiera tabellens fot.
<col> Definiera egenskaper som används för tabellkolumner.
<colgroup> Definiera grupper för tabellkolumner.