close

Gids voor het opmaken van lijsten en tabellen in CSS- Eigenschappen en voorbeelden

Het opmaken van lijsten en tabellen is een essentieel onderdeel van het weergeven van informatie op uw website. CSS biedt eigenschappen en klassen om lijsten en tabellen naar wens te maken en aan te passen. Hier is een gedetailleerde handleiding voor het opmaken van lijsten en tabellen in CSS.

 

Lijsten opmaken

Ongeordende lijst(ul)

Hoofdeigenschap: lijststijltype.

Waarden: none, disc, circle, square.

Voorbeeld:

ul {  
  list-style-type: disc;  
}

Geordende lijst(ol)

Hoofdeigenschap: lijststijltype.

Waarden: geen(standaard), decimaal, lagere-alfa, bovenste-alfa, lagere-romeinse, bovenste-romeinse.

Voorbeeld:

ol {  
  list-style-type: decimal;  
}

Definitielijst(dl)

Hoofdeigenschap: er is geen specifieke CSS-eigenschap om definitielijsten op te maken. U kunt de elementen in de lijst echter opmaken met behulp van klassen of andere eigenschappen, zoals font-size, font-weight, margin, padding, etc.

Voorbeeld:

<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;  
}

 

Tabellen opmaken

Opmaak van tabelstructuur

Hoofdeigendom: border-collapse.

Waarden: separate(default), collaps e.

Voorbeeld:

table {  
  border-collapse: collapse;  
}

Opmaak van tabelranden

Hoofdeigendom: border.

Waarden: een grenswaarde, bijvoorbeeld: 1px solid black.

Voorbeeld:

table {  
  border: 1px solid black;  
}

Opmaak van celranden

Hoofdeigendom: border.

Waarden: een grenswaarde, bijvoorbeeld: 1px solid black.

Voorbeeld:

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

Uitlijning en afstand van tabelcellen

Belangrijkste kenmerken: text-align, padding.

  • text-align: Uitlijningswaarden, bijvoorbeeld: left, right, center.
  • opvulling: afstandswaarde binnen cellen, bijvoorbeeld: 10px.

Voorbeeld:

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

Achtergrond- en tekstkleur in tabellen

Belangrijkste eigenschappen: background-color, color

  • background-color: Achtergrondkleurwaarde, bijvoorbeeld: lightgray.
  • color: Tekstkleurwaarde, bijvoorbeeld: white.

Voorbeeld:

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

Kolom- en rijgrootte in tabellen

Belangrijkste eigenschappen: width, height.

  • width: Breedtewaarde, bijvoorbeeld: "100px", "20%".
  • height: Hoogtewaarde, bijvoorbeeld: "50px", "10%".

Voorbeeld:

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

 

Dit is een uitgebreide handleiding voor het opmaken van lijsten en tabellen in CSS. U kunt de waarden en eigenschappen aanpassen om lijst- en tabelstijlen te maken die passen bij uw ontwerpbehoeften op uw website.