CSS Lists and Tables

CSS provides options to fully customize the appearance of lists and tables. This includes the style of list markers, numbering types, and the design of table borders, colors, and sizes.

Styling lists

For lists, the <list-style-type> property defines the list markers, such as circle, square, Roman numerals, or letters. Unordered and ordered lists can each have different styles.

The following examples show how lists appear with different marker and numbering styles.

Styling tables

For styling tables, properties like border, padding, and background are often used. With the <border-collapse> setting, adjacent cell borders can be merged.

The following code demonstrates a simple table containing a header and two data rows with basic CSS styling.

Tips for lists and tables

Lists and tables make content clearer and easier to read, but excessive styling can be distracting.

• Always ensure readability, for example row highlighting can be useful in tables.
• Avoid using too many different list styles on one page, as it can look visually chaotic.
• For responsive design, allow tables to be scrollable on smaller screens.