BeingXpert Learn & Build Future

17. CSS Tables

What you will learn

  • How to add borders and spacing to tables
  • How to collapse borders
  • How to make striped rows and hover effects
  • How to keep wide tables usable on small screens

Table borders

Tables have no borders by default. Add them to the table, th, and td elements.

Example

<style>
  table, th, td {
    border: 1px solid #0d6efd;
  }
</style>

<table>
  <tr><th>Name</th><th>Score</th></tr>
  <tr><td>Sam</td><td>90</td></tr>
  <tr><td>Ali</td><td>85</td></tr>
</table>

Output

Name Score
Sam 90
Ali 85

Collapsing borders

By default each cell keeps its own border, which creates double lines. border-collapse: collapse merges them into single lines.

Example

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1px solid #cfe6ff;
    padding: 10px;
    text-align: left;
  }
  th { background-color: #082b59; color: white; }
</style>

<table>
  <tr><th>Course</th><th>Lessons</th></tr>
  <tr><td>HTML</td><td>25</td></tr>
  <tr><td>CSS</td><td>31</td></tr>
</table>

Output

Course Lessons
HTML 25
CSS 31

Padding, alignment, and width

  • padding on th and td gives cells breathing room.
  • text-align sets horizontal alignment. Numbers often look best right-aligned.
  • vertical-align sets vertical alignment inside a cell (top, middle, bottom).
  • width: 100% on the table makes it fill its container.

Striped rows and hover

The :nth-child() pseudo-class picks rows by position. even and odd alternate.

Example

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 10px; text-align: left; border-bottom: 1px solid #cfe6ff; }
  th { background-color: #0d6efd; color: white; }
  tbody tr:nth-child(even) { background-color: #eaf5ff; }
  tbody tr:hover { background-color: #cfe6ff; }
</style>

<table>
  <thead><tr><th>Day</th><th>Hours</th></tr></thead>
  <tbody>
    <tr><td>Monday</td><td>2</td></tr>
    <tr><td>Tuesday</td><td>3</td></tr>
    <tr><td>Wednesday</td><td>1</td></tr>
    <tr><td>Thursday</td><td>4</td></tr>
  </tbody>
</table>

Output (the hover effect works in the live editor)

Day Hours
Monday 2
Tuesday 3
Wednesday 1
Thursday 4

Wide tables on small screens

A table with many columns can force the whole page to scroll sideways on a phone. Wrap it in a container that scrolls by itself:

Syntax

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

Then place the table inside <div class="table-wrap">. Only the table scrolls, and the page stays put.

Use tables for data only, never for page layout. Layout is the job of Flexbox and Grid, which come later in this course.

Common mistakes

  • Forgetting border-collapse: collapse, which leaves double borders.
  • Putting borders only on table and expecting cell lines.
  • No padding, so text touches the lines.
  • Striped colours with poor contrast against the text.

Exercise

Style the table with collapsed borders, a 1px solid #cfe6ff border on every cell, 8px of padding, and a #eaf5ff background on header cells.

Show solution 
<style>
  table { border-collapse: collapse; }
  th, td {
    border: 1px solid #cfe6ff;
    padding: 8px;
  }
  th { background-color: #eaf5ff; }
</style>
<table>
  <tr><th>Fruit</th><th>Colour</th></tr>
  <tr><td>Apple</td><td>Red</td></tr>
  <tr><td>Banana</td><td>Yellow</td></tr>
</table>

Knowledge check

1. Which property merges double borders into single lines?

border-collapse: collapse

2. Which selector styles every second row?

tr:nth-child(even) (or odd).

3. How do you stop a wide table from making the whole page scroll sideways?

Wrap it in a container with overflow-x: auto.

Summary

  • Borders go on th and td, and border-collapse: collapse tidies them.
  • Use padding, striped rows, and hover for readability.
  • Wrap wide tables in a scrolling container.
Scroll to Top