CSS Lists & Tables Styling

Introduction

Lists and tables are commonly used in websites to display structured information. By default, they have basic styling, but CSS allows you to customize them to match your design.

👉 In this tutorial, you will learn how to style lists and tables using CSS.

What You’ll Learn

• Styling unordered and ordered lists
• Changing list bullets and numbering
• Removing default list styles
• Styling tables with CSS
• Adding borders, spacing, and colors
• Improving table readability
• Best practices for lists and tables

Styling Lists in CSS

Lists are created using:

• <ol> → Ordered list
• <ul> → Unordered list

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

By default, unordered lists show bullets and ordered lists show numbers.

List Style Type

The list-style-type property changes the bullet or numbering style.

ul {
  list-style-type: square;
}

Common Values:

• disc (default)
• circle
• square
• none

For ordered lists:

ol {
  list-style-type: upper-roman;
}

👉 Other values include:

• lower-alpha
• upper-alpha

Remove bullets (very common for navigation menus):

ul {
  list-style-type: none;
}

👉 This is commonly used in navigation menus.

List Spacing and Padding

Lists have default spacing. You can adjust it:

ul {
  padding: 0;
  margin: 0;
}

👉 Helps create clean layouts.

Styling List Items

You can style each item using li.

li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

👉 Useful for menus and lists.

Custom List Icons

You can use images instead of bullets.

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

👉 Makes lists more visually attractive.

List Style Position

Controls bullet position.

ul {
  list-style-position: inside;
}

Values:

• inside
• outside (default)

List Style (Shorthand)

ul {
  list-style: square inside;
}

Styling Navigation Menu Example

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

li {
  display: inline;
  margin-right: 15px;
}

This converts vertical list into horizontal menu.

Modern List Styling (Menu Design)

Lists are often used to create navigation menus in modern websites.

Example:

ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
}li a {
  text-decoration: none;
  color: black;
  padding: 8px 12px;
  border-radius: 5px;
}li a:hover {
  background-color: #f0f0f0;
}

👉 What this does:

• Removes bullets
• Displays list horizontally
• Adds spacing using gap
• Adds hover effect

👉 This is how modern navigation menus are built.

Card Style Lists (Modern UI)

You can turn lists into card-style layouts.

ul {
  list-style: none;
  padding: 0;
}li {
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

👉 This creates:

• Clean card-like items
• Soft shadow for depth
• Modern UI look

Styling Tables in CSS

Tables are used to display data in rows and columns.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Adding Borders

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

👉 Adds borders to table.

Border Collapse

👉 Removes double borders and makes table cleaner.

table {
  border-collapse: collapse;
}

Very important for clean tables.

Table Padding & Alignment

Adds space inside cells.

th, td {
  padding: 10px;
  text-align: left;
}

👉 Improves readability.

Table Background Colors

th {
  background-color: lightgray;
}

👉 Highlights header row.

Zebra Striping (Professional Look)

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

👉 Alternating row colors improve readability.

Real World Styled Table Example

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #333;
  color: white;
}

td, th {
  padding: 10px;
  border: 1px solid #ddd;
}

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

👉 This is commonly used in dashboards and admin panels.

Responsive Tables (Important)

Tables can break on small screens. Make them responsive:

.table-container {
  overflow-x: auto;
}table {
  min-width: 600px;
}

👉 What this does:

• Adds horizontal scroll on mobile
• Prevents layout breaking

👉 Very important for real-world projects.

Hover Effects on Tables

Improve user interaction:

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

👉 Highlights row when user hovers
👉 Improves readability

Sticky Table Header (Advanced)

Make table headers stick while scrolling:

th {
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
}

👉 Useful for:

• Large tables
• Dashboards
• Admin panels

Table with Rounded Corners

table {
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

👉 Makes table look modern and clean

Best Practices

• Keep list styles simple and clean
• Remove bullets for navigation menus
• Use padding for better spacing
• Use zebra striping in tables
• Keep tables readable and organized

Common Mistakes

• Not removing default list padding
• Over-styling lists
• Tables without spacing
• Poor color contrast
• Too much data in one table

Important Points to Remember

• Lists are used for grouping items
• Tables are used for structured data
• Use spacing and colors carefully
• Keep design simple and readable

Practical Tasks

Task 1: List Styling

Create a list and:

• Change bullet style
• Remove default padding

Task 2: Navigation Menu

Create a menu using <ul>:

• Remove bullets
• Add spacing
• Style hover effect

Task 3: Table Styling

Create a table and:

• Add borders
• Add padding
• Change header color

Task 4: Zebra Table

Create a table with alternating row colors.

Task 5: Mini Project

Create:

• Styled list (menu)
• Styled table (data table)

👉 Combine both in one page.

Task 6: Card List Design

Convert a list into:

• Card layout
• Add shadow and spacing

Conclusion

CSS allows you to style lists and tables to make them visually appealing and user-friendly. With proper spacing, colors, and structure, you can create clean and professional layouts.

👉 Practice styling different lists
👉 Try different table designs
👉 Focus on readability and simplicity