HTML Table Padding & Spacing :



In HTML tables, you can control padding and spacing using CSS (Cascading Style Sheets). Here's how you can adjust padding and spacing for a table and its cells:

1. Padding for Cells:

You can use the padding property in CSS to set the padding inside each cell ( <th> or <td>).

<style>
    table {
        border-collapse: collapse;
        width: 50%;
        margin: 20px;
    }
    th, td {
        border: 1px solid black;
        padding: 10px; /* Adjust the padding as needed */
        text-align: left;
    }
</style>

<table>
    <!-- table content goes here -->
</table>

2. Spacing between Cells:

You can control the spacing between cells using the border-spacing property for the <table> element.

<style>
    table {
        border-collapse: separate;
        border-spacing: 10px; /* Adjust the spacing as needed */
        width: 50%;
        margin: 20px;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
</style>

<table>
    <!-- table content goes here -->
</table>

3. Padding for Table:

You can also set padding for the entire table using the padding property for the <table> element.

<style>
    table {
        border-collapse: collapse;
        width: 50%;
        margin: 20px;
        padding: 10px; /* Adjust the padding as needed */
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
</style>

<table>
    <!-- table content goes here -->
</table>

Feel free to adjust the values (such as padding and spacing) according to your design preferences and layout requirements. The examples provided use basic styling for demonstration purposes, and you can customize them further based on your specific needs.

Post a Comment

Previous Post Next Post

Popular Items