Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

CSS Tables

Borders, spacing, zebra stripes and hover.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

Well-styled tables are much easier to read:

  • border-collapse: collapse merges double borders into single lines.
  • padding on th/td adds breathing room.
  • tr:nth-child(even) creates zebra stripes.
  • tr:hover highlights the row under the mouse.
  • Wrap wide tables in a div with overflow-x: auto to make them scroll on phones.

Key Takeaways: CSS Tables

Mastering CSS Tables helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Tables Code Example

CSS 
<style>
  .wrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-family: Arial; }
  th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #E2E8F0; }
  th { background: #071A2F; color: white; }
  tr:nth-child(even) { background: #F8FAFC; }
  tr:hover { background: #DBEAFE; }
</style>

<div class="wrap">
<table>
  <tr><th>Name</th><th>Language</th><th>Score</th></tr>
  <tr><td>Ali</td><td>Python</td><td>92</td></tr>
  <tr><td>Sara</td><td>JavaScript</td><td>88</td></tr>
  <tr><td>Usman</td><td>SQL</td><td>79</td></tr>
  <tr><td>Ayesha</td><td>HTML</td><td>95</td></tr>
</table>
</div>
Free sign-in required · Google login available

CSS Tables Practice Exercises

Check what you learned in “CSS Tables”.

/ 3 solved
Fill in the blank

Merge double table borders into single lines.

table {
  border-collapse: ;
}
✓ Correct! Not quite. Try again.
Multiple choice

Which selector gives every even row a background (zebra stripes)?

✓ Correct! Not quite. Try again.
Code challenge

Collapse the table borders.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
CSS Lists
Next ❯
CSS Display

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services