CSS Lists and Tables

Introduction

Lists and tables are essential for structuring content on web pages. CSS allows styling them for better readability and design consistency.

1. CSS for Lists

Lists in HTML can be:

• Ordered (<ol>) – Numbered list
• Unordered (<ul>) – Bulleted list
• Definition (<dl>) – Term and description

Styling List Items

Change bullet style using list-style-type.

ul {
    list-style-type: square; /* circle, disc, none */
}

Remove default bullets:

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

Custom List Icons

Use images instead of default bullets:

ul {
    list-style-image: url('bullet.png');
}

Inline List Styling

ul li {
    display: inline;
    margin-right: 10px;
}

2. CSS for Tables

Tables structure tabular data with <table>, <tr>, <th>, and <td>.

Basic Table Styling

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

Striped Table Rows

tr:nth-child(even) {
    background-color: #f2f2f2;
}

Hover Effect on Rows

tr:hover {
    background-color: #ddd;
}

Border Spacing and Collapse

table {
    border-spacing: 10px;
}

/* OR */

table {
    border-collapse: collapse;
}

Conclusion

Styling lists and tables improves presentation and readability. By using CSS, you can create visually appealing content structures for web pages.