close

Průvodce formátováním seznamů a tabulek v CSS – vlastnosti a příklady

Formátování seznamů a tabulek je nezbytnou součástí zobrazování informací na vašem webu. CSS poskytuje vlastnosti a třídy pro vytváření a přizpůsobení seznamů a tabulek podle vašich představ. Zde je podrobný návod, jak formátovat seznamy a tabulky v CSS.

 

Formátování seznamů

Neuspořádaný seznam(ul)

Hlavní vlastnost: list-style-type.

Hodnoty: none, disc, circle, square.

Příklad:

ul {  
  list-style-type: disc;  
}

Objednaný seznam(ol)

Hlavní vlastnost: list-style-type.

Hodnoty: žádná(výchozí), desetinná, dolní-alfa, horní-alfa, dolní-řím., horní-řím.

Příklad:

ol {  
  list-style-type: decimal;  
}

Seznam definic(dl)

Hlavní vlastnost: Neexistuje žádná specifická vlastnost CSS pro formátování seznamů definic. Prvky v seznamu však můžete stylovat pomocí tříd nebo jiných vlastností, jako je např font-size, font-weight, margin, padding, etc.

Příklad:

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

 

Formátování tabulek

Formátování struktury tabulky

Hlavní vlastnost: border-collapse.

Hodnoty: separate(default), collaps e.

Příklad:

table {  
  border-collapse: collapse;  
}

Formátování ohraničení tabulky

Hlavní vlastnost: border.

Hodnoty: Hraniční hodnota, například: 1px solid black.

Příklad:

table {  
  border: 1px solid black;  
}

Formátování ohraničení buňky

Hlavní vlastnost: border.

Hodnoty: Hraniční hodnota, například: 1px solid black.

Příklad:

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

Zarovnání a rozestupy buněk tabulky

Hlavní vlastnosti: text-align, padding.

  • text-align: Hodnoty zarovnání, například: left, right, center.
  • padding: Hodnota mezery v buňkách, například: 10px.

Příklad:

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

Barva pozadí a textu v tabulkách

Hlavní vlastnosti: background-color, color

  • background-color: Hodnota barvy pozadí, například: lightgray.
  • color: Hodnota barvy textu, například: white.

Příklad:

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

Velikost sloupců a řádků v tabulkách

Hlavní vlastnosti: width, height.

  • width: Hodnota šířky, například: "100px", "20%".
  • height: Hodnota výšky, například: "50px", "10%".

Příklad:

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

 

Toto je komplexní průvodce, jak formátovat seznamy a tabulky v CSS. Hodnoty a vlastnosti můžete přizpůsobit a vytvořit tak styly seznamů a tabulek, které vyhovují vašim potřebám návrhu na vašem webu.