close

Vejledning til formatering af lister og tabeller i CSS- Egenskaber og eksempler

Formatering af lister og tabeller er en væsentlig del af visning af information på dit websted. CSS giver egenskaber og klasser til at oprette og tilpasse lister og tabeller til din smag. Her er en detaljeret guide til, hvordan du formaterer lister og tabeller i CSS.

 

Formatering af lister

Uordnet liste(ul)

Hovedegenskab: liste-stil-type.

Værdier: none, disc, circle, square.

Eksempel:

ul {  
  list-style-type: disc;  
}

Ordret liste(ol)

Hovedegenskab: liste-stil-type.

Værdier: ingen(standard), decimal, nedre alfa, øvre alfa, nedre romersk, øvre romersk.

Eksempel:

ol {  
  list-style-type: decimal;  
}

Definitionsliste(dl)

Hovedegenskab: Der er ingen specifik CSS-egenskab til at formatere definitionslister. Du kan dog style elementerne i listen ved hjælp af klasser eller andre egenskaber som f.eks font-size, font-weight, margin, padding, etc.

Eksempel:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>  

dt {  
  font-weight: bold;  
}

 

Formatering af tabeller

Formatering af tabelstruktur

Hovedejendom: border-collapse.

Værdier: separate(default), collaps e.

Eksempel:

table {  
  border-collapse: collapse;  
}

Formatering af tabelkant

Hovedejendom: border.

Værdier: En grænseværdi, for eksempel: 1px solid black.

Eksempel:

table {  
  border: 1px solid black;  
}

Formatering af cellekant

Hovedejendom: border.

Værdier: En grænseværdi, for eksempel: 1px solid black.

Eksempel:

td, th {  
  border: 1px solid black;  
}

Justering og afstand mellem tabelceller

Hovedegenskaber: text-align, padding.

  • tekst-align: Justeringsværdier, for eksempel: left, right, center.
  • polstring: Mellemrumsværdi i celler, for eksempel: 10px.

Eksempel:

th {  
  text-align: center;  
  padding: 10px;  
}

Baggrund og tekstfarve i tabeller

Hovedegenskaber: background-color, color

  • background-color: Baggrundsfarveværdi, for eksempel: lightgray.
  • color: Tekstfarveværdi, for eksempel: white.

Eksempel:

table {  
  background-color: lightgray;  
  color: white;  
}

Kolonne- og rækkestørrelse i tabeller

Hovedejendomme: width, height.

  • width: Breddeværdi, for eksempel: "100px", "20%".
  • height: Højdeværdi, for eksempel: "50px", "10%".

Eksempel:

th {  
  width: 100px;  
  height: 50px;  
}

 

Dette er en omfattende guide til, hvordan man formaterer lister og tabeller i CSS. Du kan tilpasse værdierne og egenskaberne for at skabe liste- og tabelstile, der passer til dine designbehov på dit websted.