close

Guide to Formatting Lists and Tables in CSS- Properties and Examples

Formatting lists and tables is an essential part of displaying information on your website. CSS provides properties and classes to create and customize lists and tables to your liking. Here is a detailed guide on how to format lists and tables in CSS.

 

Formatting Lists

Unordered List(ul)

Main property: list-style-type.

Values: none, disc, circle, square.

Example:

ul {  
  list-style-type: disc;  
}

Ordered List(ol)

Main property: list-style-type.

Values: none(default), decimal, lower-alpha, upper-alpha, lower-roman, upper-roman.

Example:

ol {  
  list-style-type: decimal;  
}

Definition List(dl)

Основное свойство: нет специального свойства CSS для форматирования списков определений. Однако вы можете стилизовать элементы в списке, используя классы или другие свойства, такие как font-size, font-weight, margin, padding, etc.

Пример:

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

 

Форматирование таблиц

Форматирование структуры таблицы

Основное свойство: border-collapse.

Ценности: separate(default), collaps т.е.

Пример:

table {  
  border-collapse: collapse;  
}

Форматирование границ таблицы

Основное свойство: border.

Значения: значение границы, например: 1px solid black.

Пример:

table {  
  border: 1px solid black;  
}

Форматирование границы ячейки

Основное свойство: border.

Значения: значение границы, например: 1px solid black.

Пример:

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

Выравнивание и интервал ячеек таблицы

Основные свойства: text-align, padding.

  • text-align: значения выравнивания, например: left, right, center.
  • padding: значение интервала внутри ячеек, например: 10px.

Пример:

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

Цвет фона и текста в таблицах

Основные свойства: background-color, color

  • background-color: Значение цвета фона, например: lightgray.
  • color: Значение цвета текста, например: white.

Пример:

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

Размер столбца и строки в таблицах

Основные свойства: width, height.

  • width: значение ширины, например: "100px", "20%".
  • height: Значение высоты, например: "50px", "10%".

Пример:

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

 

Это исчерпывающее руководство по форматированию списков и таблиц в CSS. Вы можете настроить значения и свойства, чтобы создать стили списков и таблиц, соответствующие вашим потребностям в дизайне вашего веб-сайта.