NemProgrammering.dk logo
nordicway webhotel

Sådan styler du HTML-tabeller med CSS

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video-vejledning skal vi kigge på, hvordan du kan style dine ellers så kedelige HTML-tabeller, og derved gøre dem meget pænere at se på. Vi vil blandt andet prøve at tilføje kanter på vores tabel, så det er nemmere at se, hvordan tabellen er bygget op og hvad vi egentlig arbejder med. Derudover skal vi bruge border-collapse til at fjerne den margin der er mellem vores td-elementer samt til sidste tilføje lidt baggrundsfarve, padding og tekst-alignment til vores tabel.

Øvelse:
1 - Prøv at style en tabel så den ligner et skakbræt. Tabellen skal have kvadratiske felter som er sorte og hvide. Hint: lav to klasser ("sort" og "hvid"), som du kan tilføje til dine td-elementer.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS og styling af tabeller med CSS.

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 8</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion9.css">
</head>
<body>
  <table>
    <tr>
      <th>Mærker</th>
      <th>Alder</th>
      <th>HK</th>
    </tr>
    <tr>
      <td>Skoda</td>
      <td>10</td>
      <td>110</td>
    </tr>
    <tr class="grey">
      <td>Kia</td>
      <td>12</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Volvo</td>
      <td>1</td>
      <td>140</td>
    </tr>
    <tr class="grey">
      <td>Skoda</td>
      <td>10</td>
      <td>110</td>
    </tr>
    <tr>
      <td>Kia</td>
      <td>12</td>
      <td>90</td>
    </tr>
  </table>
</body>
</html>

Her har du kildekoden

table,th,td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: left;
}

table {
  width: 300px;
}
 th {
   height: 40px;
   padding: 5px;
   background-color: green;
 }
 td {
   height: 25px;
   padding: 5px;
 }

 tr.grey {
   background-color: #ddd;
 }

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Katia    24-03-2025

Jeg ved godt kurset er gammelt, men det er ret irriterende at der siges i flere af videoerne, at man kan hente koden under videoen, når de ikke er tilfældet. Vil I ikke være søde at lægge dem ind (igen)?