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)
Main property: There is no specific CSS property to format definition lists. However, you can style the elements within the list using classes or other properties such as font-size, font-weight, margin, padding, etc.
Example:
<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;
}
Formatting Tables
Table Structure Formatting
Main property: border-collapse.
Values: separate (default), collapse.
Example:
table {
border-collapse: collapse;
}
Table Border Formatting
Main property: border.
Values: A border value, for example: 1px solid black.
Example:
table {
border: 1px solid black;
}
Cell Border Formatting
Main property: border.
Values: A border value, for example: 1px solid black.
Example:
td, th {
border: 1px solid black;
}
Alignment and Spacing of Table Cells
Main properties: text-align, padding.
- text-align: Alignment values, for example:
left, right, center. - padding: Spacing value within cells, for example: 10px.
Example:
th {
text-align: center;
padding: 10px;
}
Background and Text Color in Tables
Main properties: background-color, color
background-color: Background color value, for example:lightgray.color: Text color value, for example:white.
Example:
table {
background-color: lightgray;
color: white;
}
Column and Row Size in Tables
Main properties: width, height.
width: Width value, for example: "100px", "20%".height: Height value, for example: "50px", "10%".
Example:
th {
width: 100px;
height: 50px;
}
This is a comprehensive guide on how to format lists and tables in CSS. You can customize the values and properties to create list and table styles that suit your design needs on your website.