close

Veiledning til formatering av lister og tabeller i CSS- Egenskaper og eksempler

Formatering av lister og tabeller er en viktig del av å vise informasjon på nettstedet ditt. CSS gir egenskaper og klasser for å lage og tilpasse lister og tabeller til din smak. Her er en detaljert veiledning for hvordan du formaterer lister og tabeller i CSS.

 

Formatering av lister

Uordnet liste(ul)

Hovedegenskap: liste-stil-type.

Verdier: none, disc, circle, square.

Eksempel:

ul {  
  list-style-type: disc;  
}

Bestilt liste(ol)

Hovedegenskap: liste-stil-type.

Verdier: ingen(standard), desimal, nedre alfa, øvre alfa, nedre romersk, øvre romersk.

Eksempel:

ol {  
  list-style-type: decimal;  
}

Definisjonsliste(dl)

Hovedegenskap: Det er ingen spesifikk CSS-egenskap for å formatere definisjonslister. Du kan imidlertid style elementene i listen ved å bruke klasser eller andre egenskaper 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 av tabeller

Formatering av tabellstruktur

Hovedeiendom: border-collapse.

Verdier: separate(default), collaps e.

Eksempel:

table {  
  border-collapse: collapse;  
}

Formatering av tabellkanter

Hovedeiendom: border.

Verdier: En grenseverdi, for eksempel: 1px solid black.

Eksempel:

table {  
  border: 1px solid black;  
}

Formatering av cellekant

Hovedeiendom: border.

Verdier: En grenseverdi, for eksempel: 1px solid black.

Eksempel:

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

Justering og avstand mellom tabellceller

Hovedegenskaper: text-align, padding.

  • tekstjustering: Justeringsverdier, for eksempel: left, right, center.
  • padding: Avstandsverdi i celler, for eksempel: 10px.

Eksempel:

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

Bakgrunn og tekstfarge i tabeller

Hovedegenskaper: background-color, color

  • background-color: Bakgrunnsfargeverdi, for eksempel: lightgray.
  • color: Tekstfargeverdi, for eksempel: white.

Eksempel:

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

Kolonne og radstørrelse i tabeller

Hovedegenskaper: width, height.

  • width: Breddeverdi, for eksempel: "100px", "20%".
  • height: Høydeverdi, for eksempel: "50px", "10%".

Eksempel:

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

 

Dette er en omfattende guide for hvordan du formaterer lister og tabeller i CSS. Du kan tilpasse verdiene og egenskapene for å lage liste- og tabellstiler som passer dine designbehov på nettstedet ditt.