Skip to main content

Styling lists and tables with CSS

Styling lists and tables with CSS

In this article, we'll explore advanced techniques for styling lists and tables using CSS. You'll learn how to improve the appearance of these basic elements to create more attractive and functional web interfaces.

List Styling​

Lists in HTML can be ordered (<ol>) or disordered (<ul>With CSS, we can significantly change its appearance. Customizing Unordered Lists (<ul>

Removing Bullets from Lists​

You can remove bullets from lists using the propertylist-style-type

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

Add Icons to List Items​

You can use images or custom icons:

CSS
ul li {
  background: url("icon.png") no-repeat left center;
  padding-left: 20px; /* Ajustar según el tamaño del icono */
}

Styling List Items​

Change the color, font, and add hover effects:

CSS
ul li {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  transition: color 0.3s;
}

ul li:hover {
  color: #007bff;
}

Customizing Sorted Lists (<ol>)​

Change Number Type​

You can change the numbers to Roman numerals, letters, etc.:

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

Styling Numbers​

Apply specific styles to numbers:

CSS
ol {
  counter-reset: list;
}

ol li {
  counter-increment: list;
  position: relative;
}

ol li::before {
  content: counter(list) ". ";
  position: absolute;
  left: -2em;
  color: #007bff;
  font-weight: bold;
}

Table Styling​

Tables are HTML elements used to display tabular data. CSS allows us to transform a basic table into something much more attractive and readable. Basic Table Styling

Adding Borders​

Add borders to the table and its cells:

CSS
table,
th,
td {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

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

Alternate Row Colors​

Usenth-childTo alternate the row colors:

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

Style Headers​

Change the background color and font of the headings:

CSS
th {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

Advanced Table Styling​

Styling Inner and Outer Borders Separately​

Apply different styles to inner and outer borders:

CSS
table {
  border: 2px solid #007bff;
  border-collapse: separate;
  border-spacing: 0;
}

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

Hover Effects on Rows​

Add effects when hovering over rows:

CSS
tr:hover {
  background-color: #f5f5f5;
}

Conclusion​

Advanced styling of lists and tables with CSS allows you to transform basic elements into visually appealing and functional components. With these techniques, you can significantly improve the appearance and usability of your websites. Practice and experiment to discover all the possibilities that CSS has to offer!

Resources
Exercises

💻Get your hands on the code with these simple challenges: