CSS Tutorial

CSS Tables

CSS Tables are used to display tabular data. They are typically made up of rows and columns. Tables are widely used in displaying structured data in a grid-like format. CSS provides a wide variety of properties that allow you to style tables, rows, and cells to make them visually appealing and more user-friendly. In this tutorial, we will explore how to style tables using CSS.

📐 Syntax:

/* Table Styling */
table {
  width: 100%;
  border-collapse: collapse; /* Removes space between borders */
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

th {
  background-color: #007BFF;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* Alternating row colors */
}

/* Hover Effect */
tr:hover {
  background-color: #ddd; /* Highlight rows on hover */
}

/* Responsive Table */
@media (max-width: 768px) {
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
  }
}
  

🧪 Live Example:

🔧 Common Properties:

• border-collapse: Collapses the borders of table cells into a single border.
• th, td: Used for padding and border styling in table headers and table data cells.
• background-color: Defines the background color for the table header, rows, or cells.
• nth-child: Allows for styling alternating rows (like odd/even rows) to enhance readability.
• text-align: Aligns the content of the cells (left, center, or right).
• border: Defines the border style for the cells (solid, dashed, dotted, etc.).

📱 Responsive Layout Tip:

For small screens, you can make the table scrollable horizontally by using overflow-x: auto;. This ensures that the table fits within the screen and doesn’t break the layout.

📋 Example Table:

🔧 Advanced Styling Tips:

You can use the :hover pseudo-class to add a hover effect to the table rows, making them interactive. This can improve the user experience, especially for tables with large datasets.

/* Hover effect on table rows */
tr:hover {
  background-color: #ddd; /* Highlights row when hovered */
}