CSS Tables

CSS Tables

CSS allows you to style HTML tables by customizing their layout, spacing, borders, background, and more. This guide covers essential table styling techniques.

1. Basic Table Styling

A. Default Table (Without CSS)

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
</table>

✅ Renders a simple unstyled table.

2. Adding Basic Table Styles

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

th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

✅ Improves readability by adding borders, spacing, and background color.

3. Table Properties

Property	Description
border-collapse	Merges table borders into a single border (collapse or separate).
border-spacing	Defines the space between table cells (only when border-collapse: separate).
width	Sets the table width (px, %, auto).
text-align	Aligns text inside table cells (left, center, right).
vertical-align	Aligns cell content (top, middle, bottom).
padding	Adds space inside cells.

4. Alternating Row Colors (Zebra Stripes)

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

✅ Enhances readability by adding striped rows.

5. Hover Effect for Rows

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

✅ Highlights a row when hovered.

6. Responsive Tables (Scroll on Small Screens)

.table-container {
  overflow-x: auto;
}

table {
  min-width: 600px;
}

✅ Ensures tables are scrollable on small screens.

7. Full Example

<div class="table-container">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>30</td>
      <td>UK</td>
    </tr>
  </table>
</div>

.table-container {
  overflow-x: auto;
}

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

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

th {
  background-color: #f2f2f2;
}

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

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

✅ Well-styled, responsive, and interactive table.

8. Browser Support

✅ Fully supported in all modern browsers.