CSS Tables – HostCoder

Tables are commonly used in web development to display structured data. In this tutorial, you’ll learn how to style HTML tables using CSS to make them visually appealing and improve readability.

HTML Tables

HTML tables consist of rows and columns. A basic table structure looks like this:

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

</table>

Styling Tables

Basic Table Styling

To remove default table borders and spacing:

table {

border-collapse: collapse;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

}

Table Borders and Cell Padding

/* Custom border and padding */

table.custom {

border: 2px solid #333;

border-collapse: separate;

border-spacing: 10px;

}

th.custom, td.custom {

padding: 10px;

border: 1px solid #666;

}

Table Width and Alignment

/* Set table width and center align */

table.centered {

width: 80%;

margin: 0 auto;

}

Zebra Striping

/* Zebra striping for better readability */

tr:nth-child(even) {

background-color: #f2f2f2;

}

Advanced Table Styling

Highlighting Hovered Rows

/* Highlight rows on hover */

tr:hover {

background-color: #ccc;

}

Responsive Tables

/* Make tables scroll horizontally on small screens */

table.responsive {

overflow-x: auto;

}

Exercises

Create a table with custom borders and padding.
Implement zebra striping on a table for improved readability.
Make a table centered within a container.

Conclusion

In this tutorial, you’ve learned how to style HTML tables using CSS. You can customize table borders, cell padding, alignment, and even create responsive and visually appealing tables. Keep practicing and experimenting to become proficient in table design, as well-designed tables are crucial for displaying data in a clear and organized manner on your web pages.