Lesson 24: Mastering CSS Tables

Understanding Table Styling

CSS provides powerful properties to customize the appearance of tables, making them more readable and visually appealing.

Basic Table Styling

The following example demonstrates fundamental table styling techniques:

/* Basic table styling */
.mytable {
  width: 90%;
  border: 2px solid blue;
  border-collapse: collapse;
}

.mytable th, 
.mytable td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

.mytable th {
  font-size: 110%;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f5f7fa;
  border-top: 2px solid #cc6699;
  border-bottom: 2px solid #cc0000;
}

.mytable tr:nth-child(even) {
  background-color: #e3f2fd;
}

.mytable tr:hover {
  background-color: rgba(255, 152, 0, 0.1);
}

Interactive Table Styler

Customize table properties and see the results in real-time:

/* Generated CSS */
#tablePreview {
  border-collapse: collapse;
  width: 100%;
}

#tablePreview th, 
#tablePreview td {
  border: 1px solid #2196f3;
  padding: 8px;
  text-align: left;
}

#tablePreview th {
  background-color: #0d47a1;
  color: #ffffff;
  font-weight: bold;
}

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

#tablePreview tr:hover {
  background-color: #fff8e1;
}

Practical Table Examples

Here are practical implementations of CSS tables for real-world use cases:

Next Steps

You've learned how to create beautiful and functional tables with CSS. Continue your learning journey with the next lesson.