Introduction

Tables are used whenever data needs to be shown in a structured, row-and-column format. You will see tables everywhere: product price lists, invoices, reports, dashboards, and comparison charts.

HTML tables are powerful, but by default they look very basic and outdated. CSS is used to transform them into clean, readable, professional-looking tables suitable for modern websites and applications.

In this chapter, you will learn how to:

Understand HTML table structure
Style table borders and spacing
Control alignment and width
Create zebra-striped tables
Improve readability and usability

HTML Table Structure

Before applying CSS, you must clearly understand how tables work in HTML.

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>Developer</td>
  </tr>
</table>

Tag	Purpose
`<table>`	Main table container
`<tr>`	Table row
`<th>`	Table header cell (Bold, Centered)
`<td>`	Table data cell

Styling Borders

By default, tables have no visible borders. Here is how to style them properly.

1. Collapsing Borders (Crucial)

Use border-collapse: collapse to remove double borders between cells.

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
}

Table Layout & Alignment

Table Layout

Use table-layout: fixed when performance matters or you want predictable column widths.

table {
  table-layout: fixed;
  width: 100%;
}

Text Alignment

th {
  text-align: left; /* Standard for headers */
  background-color: #f4f4f4;
}
td {
  vertical-align: middle;
}

Professional Styling

Zebra Striping

Improves readability for large tables.

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

Hover Effects

Helps users scan rows easily.

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

Header Styling

th {
  background-color: #007bff;
  color: white;
  text-transform: uppercase;
}

Responsive Tables

Tables can break layout on mobile. A simple fix is to allow horizontal scrolling.

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

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

Common Beginner Mistakes & Best Practices

Common Mistakes

Forgetting border-collapse
Not adding padding (cramped text)
Ignoring mobile responsiveness
Using tables for page layout

Best Practices

Use semantic tags (thead, tbody)
Use zebra striping for data-heavy tables
Ensure high contrast for text
Use caption for accessibility

Chapter Summary

In this chapter, you learned:

HTML table structure and semantic tags.
How to style borders, padding, and alignment.
Creating professional tables with zebra striping and hover effects.
How to make tables responsive on mobile devices.

You now know how to create clean, readable, modern tables.

CSS Tables