Tables in CSS

Tables in HTML can be styled using CSS to change their appearance and improve their visual presentation.

properties used to design tables in CSS:

Table Borders:

Used set borders for the entire table or specific table elements (such as rows, cells, or headers) using CSS properties like border, border-collapse, and border-spacing.

table {
 border: 1px solid #000;       /* Adds a border to the whole table */
 border-collapse: collapse; 
 /* Collapses adjacent borders into a single border */
}
th, td {
border: 1px solid #000;
 /* Adds borders to table cells (headers and data cells) */
}

Table Width and Alignment:

The width and alignment of a table are controlled by using the width and margin property. To center a table on the page, you can use the margin property.

table {
 width: 100%; /* Makes the table span the width of its container */
 margin: 0 auto; /* Centers the table on the page */
}

Table Cell Padding and Spacing:

You can set padding and spacing for table cells using the padding and cellspacing attributes.

td {
 padding: 10px; /* Adds padding inside each table cell */
}
table {
 border-spacing: 10px; /* Adds spacing between table cells */
}

Table Background and Text Color:

You can change the background and text color of table cells and headers using CSS.

th, td {
 background-color: #f0f0f0; /* Sets the background color for table cells and headers */
 color: #333; /* Sets the text color for table cells and headers */
}

Table Header Styles:

You can style table headers differently from regular cells using the th selector.

th {
 background-color: #333; /* Background color for header cells */
 color: #fff; /* Text color for header cells */
}

CSS Table Border:

th and td tags using the CSS border property.

<style>
    table,
    th,
    td {
        border: 1px solid black;
    }
</style>

Example:

<!DOCTYPE>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>First_Name</th>
            <th>Last_Name</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>Sonoo</td>
            <td>Jaiswal</td>
            <td>60</td>
        </tr>
        <tr>
            <td>James</td>
            <td>William</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Swati</td>
            <td>Sironi</td>
            <td>82</td>
        </tr>
        <tr>
            <td>Chetna</td>
            <td>Singh</td>
            <td>72</td>
        </tr>
    </table>
</body>

</html>

Output:

CSS Table Border Collapse:

By using border-collapse property, we can collapse all borders in one border only.

<style>
    table,
    th,
    td {
        border: 2px solid black;
        border-collapse: collapse;
    }
</style>

Example:

<!DOCTYPE>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>First_Name</th>
            <th>Last_Name</th>
            <th>Marks</th>
        </tr>
        <tr>
            <td>Sonoo</td>
            <td>Jaiswal</td>
            <td>60</td>
        </tr>
        <tr>
            <td>James</td>
            <td>William</td>
            <td>80</td>
        </tr>
        <tr>
            <td>Swati</td>
            <td>Sironi</td>
            <td>82</td>
        </tr>
        <tr>
            <td>Chetna</td>
            <td>Singh</td>
            <td>72</td>
        </tr>
    </table>
</body>

</html>

Output: