How to Style a Table in CSS

CSS allows for extensive customization of HTML tables, enhancing their appearance and usability. By applying borders, alignment, colors, and responsive designs, tables can be made visually appealing and easier to read.

1. What is a Table in CSS?

A table in HTML (<table>) is used to display data in rows and columns. CSS is applied to tables to control their layout, spacing, colors, and overall design.

Basic HTML Table:

<table>
   <tr>
       <th>Product</th>
       <th>Price</th>
       <th>Quantity</th>
   </tr>
   <tr>
       <td>Apple</td>
       <td>$1</td>
       <td>10</td>
   </tr>
   <tr>
       <td>Banana</td>
       <td>$0.5</td>
       <td>20</td>
   </tr>

</table>

2. CSS Table Properties

CSS can style different parts of a table:

table – Entire table.
tr – Table row.
th – Table header cell.
td – Table data cell.

3. CSS Table Border

Borders make tables clearer and more defined.

Example:

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

border-collapse: collapse; – Ensures borders are not doubled.
padding – Adds space inside table cells.
text-align – Aligns text within cells.

Effect:

Product	Price	Quantity
Apple	$1	10
Banana	$0.5	20

4. Table Alignment (Horizontal & Vertical)

Property	Description
`text-align`	Aligns text horizontally (`left`, `center`, `right`).
`vertical-align`	Aligns content vertically (`top`, `middle`, `bottom`).

Example:

th {
text-align: center;
}
td {
vertical-align: middle;
}

5. Responsive Tables (Scroll & Stack)

Responsive tables adapt to screen sizes.

Method 1 – Scrollable Tables:

            CSS:

.table-wrapper {
       overflow-x: auto;
       }
table {
       width: 100%;
       }

HTML:

<div class="table-wrapper">
   <table>
       <tr>
           <th>Product</th>
           <th>Price</th>
           <th>Quantity</th>
       </tr>
       <tr>
           <td>Apple</td>
   <td>$1</td>
<td>10</td>
       </tr>
   </table>
</div>

Effect: Allows horizontal scrolling on smaller screens.

Method 2 – Stack Rows (Mobile-Friendly):

@media (max-width: 600px) {
       table, thead, tbody, th, td, tr {
                                    display: block;
                           }
th, td {
       width: 100%;
   }
}

Effect: Table rows stack vertically on small screens.

6. Table Width and Size

Control table size by setting width and height.

table {
width: 80%;
height: auto;
}

Effect: Table spans 80% of the screen width.

7. Styling Tables with Background and Color

th {
   background-color: #007bff;
   color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Effect: Alternates row colors (striped tables).

8. Striped Tables (Alternating Row Colors)

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

Effect: Improves readability by alternating row colors.

9. Hover Effects for Tables

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

Effect: Row changes color when hovered over.

10. Full Example: Styled Table with Hover and Stripes

HTML:

<table>
   <tr>
       <th>Product</th>
       <th>Price</th>
       <th>Quantity</th>
   </tr>
   <tr>
       <td>Apple</td>
       <td>$1</td>
       <td>10</td>
   </tr>
   <tr>
       <td>Banana</td>
       <td>$0.5</td>
       <td>20</td>
   </tr>

</table>

CSS:

table {

   width: 100%;
   border-collapse: collapse;
}
th, td {
   border: 1px solid #ddd;
   padding: 12px;
   text-align: left;
}
th {
  background-color: #007bff;
   color: white;
}
tr:nth-child(even) {
   background-color: #f2f2f2;
}
tr:hover {
   background-color: #ddd;
}

11. Table with Rounded Corners

table {
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid #ddd;
   border-radius: 10px;
}
th, td {
   padding: 10px;
}

Effect: Rounded table corners for a softer design.

12. Merging Table Cells (Colspan and Rowspan)

<table>
   <tr>
       <th colspan="2">Product</th>
       <th>Quantity</th>
   </tr>
   <tr>
       <td>Apple</td>
       <td>$1</td>
       <td>10</td>
   </tr>
</table>

colspan="2" – Merges two columns.
rowspan="2" – Merges two rows.

13. Best Practices for Styling Tables

Use Borders Sparingly – Keep table borders light and subtle.
Add Hover Effects – Highlight rows on hover to enhance usability.
Striped Rows – Alternate row colors for easier reading.
Keep Responsive – Ensure tables adapt to different screen sizes.
Minimal Padding – Use padding for a clean look without overcrowding cells.

By applying these CSS techniques, you can transform simple HTML tables into visually appealing, functional, and responsive data displays that improve user experience.

How to Style a Table in CSS