close

Útmutató a listák és táblázatok formázásához CSS-ben – Tulajdonságok és példák

A listák és táblázatok formázása elengedhetetlen része az információknak a webhelyen való megjelenítésének. A CSS tulajdonságokat és osztályokat biztosít a listák és táblázatok tetszés szerinti létrehozásához és testreszabásához. Itt található egy részletes útmutató a listák és táblázatok CSS-ben való formázásához.

 

Formázási listák

Rendeletlen lista(ul)

Fő tulajdonság: list-style-type.

Értékek none, disc, circle, square:.

Példa:

ul {  
  list-style-type: disc;  
}

Rendezett lista(ol)

Fő tulajdonság: list-style-type.

Értékek: nincs(alapértelmezett), decimális, alsó-alfa, felső-alfa, alsó-római, felső-római.

Példa:

ol {  
  list-style-type: decimal;  
}

Definíciós lista(dl)

Fő tulajdonság: Nincs speciális CSS-tulajdonság a definíciós listák formázásához. A listán belüli elemek stílusozhatók azonban osztályok vagy egyéb tulajdonságok segítségével, mint pl font-size, font-weight, margin, padding, etc.

Példa:

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

 

Táblázatok formázása

Táblázat szerkezetének formázása

Fő ingatlan: border-collapse.

Értékek: separate(default), collaps e.

Példa:

table {  
  border-collapse: collapse;  
}

Táblázatszegély formázása

Fő ingatlan: border.

Értékek: Szegélyérték, például: 1px solid black.

Példa:

table {  
  border: 1px solid black;  
}

Cellaszegély formázása

Fő ingatlan: border.

Értékek: Szegélyérték, például: 1px solid black.

Példa:

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

A táblázat celláinak igazítása és térköze

Főbb tulajdonságai: text-align, padding.

  • text-align: Igazítási értékek, például: left, right, center.
  • padding: A cellákon belüli térköz, például: 10 képpont.

Példa:

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

Háttér és szöveg színe táblázatokban

Főbb tulajdonságai: background-color, color

  • background-color: Háttérszín értéke, például: lightgray.
  • color: Szöveg színértéke, például: white.

Példa:

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

Oszlop- és sorméret a táblázatokban

Főbb tulajdonságai: width, height.

  • width: Szélesség értéke, például: "100px", "20%".
  • height: Magasságérték, például: "50px", "10%".

Példa:

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

 

Ez egy átfogó útmutató a listák és táblázatok CSS-ben történő formázásához. Testreszabhatja az értékeket és a tulajdonságokat, hogy olyan lista- és táblázatstílusokat hozzon létre, amelyek megfelelnek a webhely tervezési igényeinek.