CSS Tables

HTML tables display data in rows and columns. CSS is used to improve the appearance of tables by adding borders, colors, spacing, alignment, and other formatting.

Common CSS Table Properties

• border
• border-collapse
• width
• height
• padding
• text-align
• background-color

table{

    border:1px solid black;

}

The border property adds borders around the table, rows, and cells.

table, th, td{

    border:2px solid black;

}

th{

    border:2px dashed blue;

}

By default, table borders are separated. The border-collapse property merges adjacent borders into a single border.

table{

    border-collapse:collapse;

}

table{

    border-collapse:separate;

}

The width and height properties control the size of tables and cells.

table{

    width:100%;

}

th{

    height:60px;

}

CSS allows you to align text inside table cells using the text-align and vertical-align properties.

th{

    text-align:center;

}

td{

    vertical-align:middle;

}

The padding property adds space between the content of a table cell and its border, making tables easier to read.

th, td{

    padding:15px;

}

th{

    padding:20px;

}

The :hover pseudo-class highlights rows when the mouse pointer moves over them.

tr:hover{

    background-color:#f2f2f2;

}

tbody tr:hover{

    background:#d1ecf1;

    cursor:pointer;

}

Zebra-striped tables use alternating row colors to improve readability, especially for large datasets.

tr:nth-child(even){

    background-color:#f2f2f2;

}

tr:nth-child(odd){

    background-color:white;

}

Responsive tables allow users to scroll horizontally on smaller screens instead of breaking the layout.

.table-container{

    overflow-x:auto;

}

...

Example 1: Simple Table Border

table, th, td{

    border:1px solid black;

}

Example 2: Border Collapse

table{

    border-collapse:collapse;

}

Example 3: Hover Effect

tr:hover{

    background-color:lightblue;

}

Example 4: Zebra Striped Table

tr:nth-child(even){

    background:#f2f2f2;

}

Well-designed tables improve readability and make data easier to understand. Follow these best practices when styling tables.

• Use border-collapse: collapse; for clean borders.
• Add sufficient padding inside table cells.
• Align text consistently.
• Use zebra stripes for large tables.
• Add hover effects for better user interaction.
• Keep column widths consistent.
• Use responsive tables for mobile devices.
• Avoid excessive colors and borders.

❌ Incorrect

table{

    width:600px;

}

✔ Better

table{

    width:100%;

    border-collapse:collapse;

}

CSS table properties are fully supported by all modern web browsers.

1. What is the purpose of CSS tables?
2. Which property is used to merge table borders?
3. What is the difference between collapse and separate?
4. How do you add spacing inside table cells?
5. Which property changes the alignment of table text?
6. How do you create zebra-striped tables?
7. How do you add a hover effect to table rows?
8. How can you make a table responsive?
9. Why is border-collapse commonly used?
10. What are the best practices for designing CSS tables?

In this lesson, you learned:

• ✔ Introduction to CSS Tables.
• ✔ Table Borders.
• ✔ Border Collapse.
• ✔ Table Width & Height.
• ✔ Table Alignment.
• ✔ Table Padding.
• ✔ Table Hover Effect.
• ✔ Zebra Striped Tables.
• ✔ Responsive Tables.
• ✔ Practical Examples.
• ✔ Best Practices and Common Mistakes.