How can HTML tables be effectively styled with CSS? 1. Start by applying base styles like border-collapse, padding, and background colors to headers for a clean layout. 2. Enhance readability with zebra stripes using :nth-child(even) and add hover effects for interactivity. 3. Control borders and use a scrollable container to improve mobile responsiveness, or restructure into card-like layouts via media queries on small screens. 4. Prioritize accessibility with scope attributes and selectively hide non-essential columns on mobile devices.

Styling HTML tables with CSS might not be the most glamorous part of web design, but it’s definitely one of those things that can make a big difference in how your data looks and feels to users. Whether you're building a simple comparison table or a complex dashboard, learning how to control spacing, borders, colors, and responsiveness will save you headaches later.

Let’s dive into some practical tips and techniques.

Basic Table Structure and Default Styles

Before jumping into styling, it's good to understand what a basic HTML table looks like:

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Data A1</td><td>Data B1</td></tr>
    <tr><td>Data A2</td><td>Data B2</td></tr>
  </tbody>
</table>

By default, browsers apply minimal styles — just plain text with no borders or padding. That means if you want your table to look clean and readable, you’ll need to add those styles yourself.

Here are a few common base styles to start with:

• Use border-collapse: collapse; to remove double borders between cells.
• Add padding inside th and td for better readability.
• Apply background colors to headers (th) to visually separate them from body rows.

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

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

th {
  background-color: #f5f5f5;
}

This gives your table a much cleaner appearance without being too flashy.

Adding Visual Enhancements

Once you've got the basics down, you can make your table more user-friendly with a few visual touches.

Zebra Stripes for Readability

Alternating row colors help users scan long tables more easily. You can do this with the :nth-child(even) selector:

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

Hover Effects for Interaction

Adding a hover effect on rows helps users know they’re interacting with a clickable or selectable item (especially useful in dashboards):

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

Borders and Rounded Corners

If you want visible borders around all cells, skip border-collapse and use individual borders instead. Also, wrapping the table in a container with overflow-x: auto; is a good idea for mobile responsiveness.

table {
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  border: 1px solid #ccc;
}

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

Making Tables Responsive

One of the biggest pain points with HTML tables is making them mobile-friendly. Here are a few approaches depending on your needs:

Wrap It in a Scrollable Container

This is the simplest solution. Just wrap your table in a div and apply horizontal scrolling:

<div class="table-wrapper">
  <table>...</table>
</div>

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

Convert to Cards on Small Screens

For a more advanced layout, you can use media queries to switch the table layout to something card-like on smaller screens. This requires more work and usually involves restructuring the HTML using display: block or flex/grid layouts for mobile only.

A quick example:

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

  th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }
}

It’s not perfect, but it gets the job done when space is tight.

Final Touches and Tips

• Don’t forget about accessibility — use scope="col" on headers so screen readers can properly associate data.
• If your table has many columns, consider hiding less important ones on small screens using media queries and display: none.
• Avoid overly complex styling — sometimes simplicity works best for data-heavy tables.
• Test your table across devices and browsers. Some older browsers may not fully support certain CSS properties.

That covers the essentials of styling HTML tables with CSS. It’s not complicated, but there are enough edge cases and browser quirks to keep things interesting. Once you get the hang of it, though, tables become a lot easier to manage.

The above is the detailed content of A complete CSS tutorial on styling HTML tables. For more information, please follow other related articles on the PHP Chinese website!