• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Tables

← Previous Next →

🔹 What Are CSS Tables?

HTML tables are used to display tabular data. CSS allows you to style tables for better presentation, readability, spacing, and responsiveness.

🔸 Common Table Elements

  • <table> – Defines the table

  • <tr> – Table row

  • <td> – Table cell

  • <th> – Table header

  • <thead>, <tbody>, <tfoot> – Table sections

🔸 1. Basic Table Styling

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

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

🔸 2. border-collapse

  • collapse: Merges adjacent borders

  • separate: Keeps borders separate (default)

table {
  border-collapse: collapse;
}

🔸 3. Zebra Striped Rows

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

🔸 4. Hover Effects

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

🔸 5. Header Styling

th {
  background-color: #04AA6D;
  color: white;
  text-align: left;
}

🔸 6. Table Width and Alignment

table {
  width: 80%;
  margin: auto;
  text-align: center;
}

🔸 7. Responsive Tables (with scroll)

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

table {
  width: 100%;
  min-width: 600px;
}

Wrap table in:

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

Practice Questions

Q1. Add 1px solid border to table cells.

Q2. Collapse borders in a table.

Q3. Add 10px padding to table cells.

Q4. Change table header background to dark blue and text to white.

Q5. Alternate table row background colors.

Q6. Center-align text inside all cells.

Q7. Add hover effect to table rows.

Q8. Set table width to 80% and center it.

Q9. Make table horizontally scrollable on smaller screens.

Q10. Apply bold font to the first column in each row.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top