CSS Documentation

Table Styling Properties

Menu

CSS Table Styling Properties

CSS provides various properties to style tables, allowing you to create visually appealing and well-structured data presentations.

Common Table Styling Properties

  • border-collapse: Specifies whether table borders should be collapsed into a single border or separated.
  • border-spacing: Sets the distance between the borders of adjacent cells.
  • caption-side: Specifies the placement of a table caption.
  • empty-cells: Defines how to display borders and background on cells with no visible content.
  • table-layout: Sets the algorithm used to lay out table cells, rows, and columns.

Example

Here's an example of styling a table:

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

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

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

Responsive Tables

To make tables responsive, you can use the following technique:

.table-responsive {
ㅤoverflow-x: auto;
}

Styling Table Headers

To style table headers differently:

th {
ㅤbackground-color: #4CAF50;
ㅤcolor: white;
}

Best Practices

  • Use border-collapse: collapse; for a cleaner look.
  • Apply alternating row colors for better readability.
  • Use responsive techniques for mobile-friendly tables.
  • Style table headers distinctly from data cells.
  • Use appropriate padding and text alignment for cell content.

Mastering CSS table styling properties allows you to create visually appealing and well-organized data presentations. Experiment with different styles to enhance the readability and aesthetics of your tables.