close

Przewodnik po formatowaniu list i tabel w CSS- Właściwości i przykłady

Formatowanie list i tabel jest istotną częścią wyświetlania informacji w Twojej witrynie. CSS zapewnia właściwości i klasy do tworzenia i dostosowywania list i tabel do własnych upodobań. Oto szczegółowy przewodnik na temat formatowania list i tabel w CSS.

 

Formatowanie list

Lista nieuporządkowana(ul)

Główna właściwość: typ-styl-listy.

Wartości: none, disc, circle, square.

Przykład:

ul {  
  list-style-type: disc;  
}

Lista uporządkowana(ol)

Główna właściwość: typ-styl-listy.

Wartości: brak(domyślnie), dziesiętny, dolny-alfa, górny-alfa, dolny-rzymski, górno-rzymski.

Przykład:

ol {  
  list-style-type: decimal;  
}

Lista definicji(dl)

Główna właściwość: nie ma określonej właściwości CSS do formatowania list definicji. Można jednak stylizować elementy na liście za pomocą klas lub innych właściwości, takich jak font-size, font-weight, margin, padding, etc.

Przykład:

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

 

Formatowanie tabel

Formatowanie struktury tabeli

Główny obiekt: border-collapse.

wartości: separate(default), collaps mi.

Przykład:

table {  
  border-collapse: collapse;  
}

Formatowanie obramowania tabeli

Główny obiekt: border.

Wartości: wartość graniczna, na przykład: 1px solid black.

Przykład:

table {  
  border: 1px solid black;  
}

Formatowanie obramowania komórki

Główny obiekt: border.

Wartości: wartość graniczna, na przykład: 1px solid black.

Przykład:

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

Wyrównanie i odstępy między komórkami tabeli

Główne właściwości: text-align, padding.

  • text-align: Wartości wyrównania, na przykład: left, right, center.
  • dopełnienie: wartość odstępu w komórkach, na przykład: 10px.

Przykład:

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

Kolor tła i tekstu w tabelach

Główne właściwości: background-color, color

  • background-color: Wartość koloru tła, na przykład: lightgray.
  • color: Wartość koloru tekstu, na przykład: white.

Przykład:

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

Rozmiar kolumn i wierszy w tabelach

Główne właściwości: width, height.

  • width: Wartość szerokości, na przykład: „100px”, „20%”.
  • height: Wartość wysokości, na przykład: „50px”, „10%”.

Przykład:

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

 

Jest to kompleksowy przewodnik na temat formatowania list i tabel w CSS. Możesz dostosować wartości i właściwości, aby utworzyć style list i tabel, które odpowiadają Twoim potrzebom projektowym w serwisie WWW.