• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Tables Quiz

Q1: Which property merges table cell borders?

A. table-border
B. border-collapse
C. cell-merge
D. border-join

Q2: Which tag represents a row in an HTML table?

A. <td>
B. <table>
C. <tr>
D. <th>

Q3: How do you add padding to table cells?

A. padding: 10px;
B. margin: 10px;
C. border-spacing: 10px;
D. table-padding: 10px;

Q4: What does tr:hover do?

A. Styles the row when hovered
B. Deletes the row
C. Highlights headers
D. Hides the row

Q5: Which tag is used for a table header cell?

A. <header>
B. <th>
C. <thead>
D. <h1>

Q6: What is the default value of border-collapse?

A. collapsed
B. separate
C. merge
D. auto

Q7: Which pseudo-class is used to style even rows?

A. :hover
B. :nth-child(even)
C. :even
D. :row-even

Q8: How to center-align all text in table?

A. text-align: center;
B. margin: auto;
C. align: center;
D. center-text: true;

Q9: How to make a table responsive horizontally?

A. display: flex;
B. position: scroll;
C. overflow-x: auto on wrapper div
D. float: table;

Q10: Which section tags can a table contain?

A. <head>, <body>, <foot>
B. <thead>, <tbody>, <tfoot>
C. <row>, <col>
D. <start>, <middle>, <end>
← Previous Next →
Login
Go Back Top