CSS: Tables

In CSS, you can style HTML tables and their elements (such as <table>, <tr>, <th>, <td>, etc.) using various properties to control their appearance, spacing, borders, backgrounds, and more. Here's an overview of how you can style tables in CSS:

• Table Borders (border-collapse and border-spacing): You can control the border behavior of tables and their cells using these properties.

table {
    border-collapse: collapse; /* Collapse table borders */
    border-spacing: 0; /* Set spacing between table cells to 0 */
}

• Table Cell Borders (border): You can apply borders to table cells (<td> and <th>) using the border property.

td, th {
    border: 1px solid black; /* Add 1-pixel solid black border to table cells */
}

• Table Width and Height (width and height): You can set the width and height of tables using these properties.

table {
    width: 100%; /* Make the table width 100% of its container */
    height: 200px; /* Set table height to 200 pixels */
}

• Table Background (background-color): You can add background colors to tables or specific table elements.

table {
    background-color: #f0f0f0; /* Light gray background for the entire table */
}

th {
    background-color: #e0e0e0; /* Light gray background for table headers */
}

td {
    background-color: #ffffff; /* White background for table cells */
}

• Table Header (<thead>) and Footer (<tfoot>): You can target and style the table header and footer sections separately.

thead {
    background-color: #ccc; /* Gray background for table header */
    font-weight: bold; /* Bold font for table header */
}

tfoot {
    background-color: #ccc; /* Gray background for table footer */
}

• Striped Rows (:nth-child): You can use the :nth-child pseudo-class to style alternate rows in a table, creating a striped effect.

tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray background for even rows */
}

tr:nth-child(odd) {
    background-color: #ffffff; /* White background for odd rows */
}

• Table Cell Padding (padding): You can add padding to table cells to create space between cell content and borders.

td, th {
    padding: 10px; /* Add 10 pixels of padding to table cells */
}

• Table Caption (caption-side): You can position the table caption (if present) using the caption-side property.

caption {
    caption-side: bottom; /* Position the caption below the table */
}

These CSS properties and techniques allow you to customize the appearance of HTML tables, making them visually appealing and well-structured within your web pages.