CSS Tables Practice Questions with Solutions

By /

Introduction

CSS table properties help you create clean, professional, and easy-to-read tables. You can add borders, change cell spacing, adjust alignment, set table width, and improve the overall appearance of data. In this chapter, you’ll practice CSS table properties through simple solved questions that are easy for beginners to understand. CSS Tables practice questions with solutions help to understand the concepts.

Question 1: Add a Border to a Table

Problem Statement

Write CSS to add a 1px solid black border to a table, its rows, and its cells.

CSS Code

table,
th,
td {
    border: 1px solid black;
}

Output

The table displays with 1px solid black borders around the table, headings, and data cells.

Explanation

  • border adds a border around table elements.
  • 1px sets the border thickness.
  • solid defines the border style.
  • black sets the border color.

Question 2: Collapse Table Borders

Problem Statement

Write CSS to merge all table borders into a single border.

CSS Code

table {
    border-collapse: collapse;
}

Output

The table displays with single merged borders instead of double borders.

Explanation

  • border-collapse controls how table borders are displayed.
  • collapse merges adjacent borders into one.
  • This creates a cleaner table layout.

Question 3: Set the Table Width

Problem Statement

Write CSS to make a table use 100% of its parent container’s width.

CSS Code

table {
    width: 100%;
}

Output

The table stretches across the full width of its parent element.

Explanation

  • width controls the table width.
  • 100% makes the table responsive within its container.
  • This is commonly used in modern web design.

Question 4: Center Text Inside Table Cells

Problem Statement

Write CSS to center-align the text inside all table headings and data cells.

CSS Code

th,
td {
    text-align: center;
}

Output

All text inside table cells appears centered.

Explanation

  • text-align controls horizontal text alignment.
  • center places the content in the middle of each cell.
  • This is useful for tables containing numbers or short values.

Question 5: Add Padding to Table Cells

Problem Statement

Write CSS to add 12px padding inside every table cell.

CSS Code

th,
td {
    padding: 12px;
}

Output

Each table cell displays with 12px inner spacing, making the content easier to read.

Explanation

  • padding creates space between the cell border and its content.
  • More padding improves readability.
  • It also gives the table a cleaner appearance.

Question 6: Change the Table Header Background Color

Problem Statement

Write CSS to display the table header with a blue background and white text.

CSS Code

th {
    background-color: blue;
    color: white;
}

Output

The table header displays with:

  • Blue background
  • White text

Explanation

  • background-color changes the background of the table header.
  • color changes the text color.
  • This style makes table headings easy to identify.

Question 7: Add Zebra Striping to Table Rows

Problem Statement

Write CSS to display every even table row with a light gray background.

CSS Code

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

Output

Every second row displays with a light gray background.

Explanation

  • :nth-child(even) selects all even-numbered rows.
  • background-color creates alternating row colors.
  • Zebra striping improves table readability.

Question 8: Change Row Color on Hover

Problem Statement

Write CSS to change the background color of a table row to light blue when the mouse pointer moves over it.

CSS Code

tr:hover {
    background-color: lightblue;
}

Output

The row changes to a light blue background when hovered.

Explanation

  • :hover applies styles while the mouse pointer is over the row.
  • background-color changes the row color.
  • Hover effects help users focus on a specific row.

Question 9: Position the Table Caption at the Bottom

Problem Statement

Write CSS to display the table caption below the table.

CSS Code

caption {
    caption-side: bottom;
}

Output

The table caption appears below the table.

Explanation

  • caption-side controls the position of the table caption.
  • bottom places the caption below the table.
  • The default position is top.

Question 10: Create a Complete Styled Table

Problem Statement

Write CSS to create a table with the following styles:

  • Full width
  • Collapsed borders
  • 1px solid gray border
  • 10px cell padding
  • Center-aligned text

CSS Code

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

th,
td {
    border: 1px solid gray;
    padding: 10px;
    text-align: center;
}

Output

The table displays with:

  • Full width
  • Single borders
  • Comfortable cell spacing
  • Centered content

Explanation

  • width: 100%; makes the table responsive.
  • border-collapse: collapse; merges adjacent borders.
  • padding improves readability.
  • text-align: center; aligns the content in the middle of each cell.

Key Takeaways

  • border adds borders around tables and cells.
  • border-collapse removes double borders.
  • width controls the table width.
  • padding improves spacing inside cells.
  • text-align controls the alignment of cell content.
  • :nth-child(even) creates zebra-striped rows.
  • :hover highlights rows when the mouse pointer moves over them.
  • caption-side changes the position of the table caption.

Frequently Asked Questions (FAQs)

1. What does the border-collapse property do?

The border-collapse property merges adjacent table borders into a single border, creating a cleaner table layout.

2. How can I make a table fill the available width?

Use the following CSS:

table {
    width: 100%;
}

This makes the table use the full width of its parent container.

3. What is zebra striping in a table?

Zebra striping applies alternating background colors to rows, making large tables easier to read.

4. How do I add space inside table cells?

Use the padding property.

th,
td {
    padding: 10px;
}

5. How can I highlight a table row when the mouse hovers over it?

Use the :hover pseudo-class.

tr:hover {
    background-color: lightblue;
}

6. What is the purpose of the caption-side property?

The caption-side property changes the position of the table caption, allowing it to appear above or below the table.

7. Which CSS properties are commonly used to style tables?

The most commonly used properties are:

  • border
  • border-collapse
  • width
  • padding
  • text-align
  • background-color
  • caption-side

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top