close

Opas luetteloiden ja taulukoiden muotoiluun CSS:ssä- Ominaisuudet ja esimerkit

Listojen ja taulukoiden muotoilu on olennainen osa tietojen näyttämistä verkkosivustollasi. CSS tarjoaa ominaisuuksia ja luokkia, joiden avulla voit luoda ja mukauttaa luetteloita ja taulukoita mielesi mukaan. Tässä on yksityiskohtainen opas luetteloiden ja taulukoiden muotoilusta CSS:ssä.

 

Luetteloiden muotoilu

Järjestämätön lista(ul)

Pääominaisuus: list-style-type.

Arvot: none, disc, circle, square.

Esimerkki:

ul {  
  list-style-type: disc;  
}

Tilauslista(ol)

Pääominaisuus: list-style-type.

Arvot: none(oletus), desimaali, alempi-alfa, ylempi-alfa, alempi-roman, ylempi-roman.

Esimerkki:

ol {  
  list-style-type: decimal;  
}

Määritelmäluettelo(dl)

Pääominaisuus: Määrittelyluetteloiden muotoilemiseen ei ole erityistä CSS-ominaisuutta. Voit kuitenkin muokata luettelon elementtejä käyttämällä luokkia tai muita ominaisuuksia, kuten font-size, font-weight, margin, padding, etc.

Esimerkki:

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

 

Muotoilutaulukot

Taulukon rakenteen muotoilu

Pääomaisuus: border-collapse.

Arvot: separate(default), collaps e.

Esimerkki:

table {  
  border-collapse: collapse;  
}

Taulukon reunojen muotoilu

Pääomaisuus: border.

Arvot: Reunusarvo, esimerkiksi: 1px solid black.

Esimerkki:

table {  
  border: 1px solid black;  
}

Solun reunan muotoilu

Pääomaisuus: border.

Arvot: Reunusarvo, esimerkiksi: 1px solid black.

Esimerkki:

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

Taulukon solujen kohdistus ja etäisyys

Pääominaisuudet: text-align, padding.

  • text-align: Tasausarvot, esimerkiksi: left, right, center.
  • täyttö: soluvälin arvo, esimerkiksi: 10px.

Esimerkki:

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

Taulukon tausta ja tekstin väri

Pääominaisuudet: background-color, color

  • background-color: Taustavärin arvo, esimerkiksi: lightgray.
  • color: Tekstin väriarvo, esimerkiksi: white.

Esimerkki:

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

Sarakkeiden ja rivien koko taulukoissa

Pääominaisuudet: width, height.

  • width: Leveysarvo, esimerkiksi: "100px", "20%".
  • height: Korkeusarvo, esimerkiksi: "50px", "10%".

Esimerkki:

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

 

Tämä on kattava opas luetteloiden ja taulukoiden muotoiluun CSS:ssä. Voit muokata arvoja ja ominaisuuksia luodaksesi luettelo- ja taulukkotyylejä, jotka sopivat sivustosi suunnittelutarpeisiisi.