Tabeller

Skapa tabeller i HTML

Till skillnad från en lista så består tabeller utav vertikala och horisontella rader/celler. Det är användbart när man behöver lista olika objekt, priser, information etc. bredvid varandra för jämförelse. Tabeller bör inte användas för att positionera ut hemsidans kolumner i layouten. Det kommer vi sedan att gå igenom när vi berättar om CSS.

Tabell, rad och cell

För att skriva en tabell börjar du med <table>

<table>

</table>

Sedan ska vi skriva en rad med hjälp av <tr> (Table Row).

<table>
  <tr>

  </tr>
</table>

För varje cell i raden använder vi <td> (Table Data)

<table>
  <tr>
    <td>Namn</td>
    <td>Ålder</td>
    <td>Intresse</td>
  </tr>
</table>

<table>
  <tr>
    <td>Namn</td>
    <td>Ålder</td>
    <td>Intresse</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>33</td>
    <td>Tennis</td>
  </tr>
  <tr>
    <td>Patrik</td>
    <td>26</td>
    <td>Matlagning</td>
  </tr>
</table>

Ändra bredd och höjd

Cellerna anpassar sig automatiskt beroende på vilken bredd och höjd man ställer in.
För det så behöver vi skriva in en style i <table>

<table style="width: 300px; height: 100px;">
  <tr>
    <td>Namn</td>
    <td>Ålder</td>
    <td>Intresse</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>33</td>
    <td>Tennis</td>
  </tr>
  <tr>
    <td>Patrik</td>
    <td>26</td>
    <td>Matlagning</td>
  </tr>
</table>

<thead> <tbody> och <tfoot>

Det är inget måste, men om man vill dela in tabellen i huvud, kropp och fot så passar <thead>, <tbody> och <tfoot> bra. Dessa ger varken någon stil eller funktion, utan används för att markera områden, och på så sätt ge dom olika stil senare i kursen då vi går igenom CSS.

<table style="width: 300px; height: 100px;">

  <thead>
    <tr>
      <td>Namn</td>
      <td>Ålder</td>
      <td>Intresse</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Anna</td>
      <td>33</td>
      <td>Tennis</td>
    </tr>
    <tr>
      <td>Patrik</td>
      <td>26</td>
      <td>Matlagning</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Slut på namn</td>
      <td>Slut på ålder</td>
      <td>Slut på intresse</td>
    </tr>
  </tfoot>

</table>

Dags att styla hemsidan - Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus