Tables in CSS — Styling HTML Tables

CSS lets you style HTML tables to improve readability, design, and layout.

Basic HTML Table Structure

<table>  <thead>    <tr>      <th>Header 1</th>      <th>Header 2</th>    </tr>  </thead>  <tbody>    <tr>      <td>Cell 1</td>      <td>Cell 2</td>    </tr>    <tr>      <td>Cell 3</td>      <td>Cell 4</td>    </tr>  </tbody></table>

Common CSS Properties for Tables

1. Borders

table, th, td {  border: 1px solid black;  border-collapse: collapse; /* removes double borders */}

• border-collapse: collapse; makes borders shared between cells.

2. Padding & Spacing

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

3. Background Colors

thead {  background-color: #333;  color: white;}tbody tr:nth-child(even) {  background-color: #f2f2f2; /* Zebra striping */}

4. Width and Layout

table {  width: 100%; /* full container width */  table-layout: fixed; /* fixed cell widths */}

5. Hover Effect on Rows

tbody tr:hover {  background-color: #ddd;}

Complete Example

table {  width: 100%;  border-collapse: collapse;  font-family: Arial, sans-serif;}th, td {  border: 1px solid #ccc;  padding: 8px;  text-align: left;}thead {  background-color: #007BFF;  color: white;}tbody tr:nth-child(even) {  background-color: #f9f9f9;}tbody tr:hover {  background-color: #f1f1f1;}

If you want, I can help you with responsive tables, complex table layouts, or interactive table styling!