HTML Table Width – A Complete Guide with Examples and Best Practices

What is the width Attribute in HTML Tables?

The width attribute in the <table> tag specifies the width of the table in pixels or as a percentage of the parent container. However, in HTML5, the width attribute is deprecated, and CSS should be used instead.

🔹 Best Practice: Use CSS (width) for better compatibility and responsive design.

Step-by-Step Guide to Using width in HTML Tables

Step 1: Setting Table Width Using the `width` Attribute (Deprecated)

<table border="1" width="500">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

🔹 Output: The table will be 500 pixels wide, but this method is outdated.

Step 2: Using CSS to Set Table Width (Recommended)

<style>
    table {
        width: 500px;
        border: 1px solid black;
    }
</style>

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

🔹 Best Practice: Using CSS is the modern and flexible way to set table width.

Step 3: Setting Table Width as a Percentage

<style>
    table {
        width: 80%; /* Table takes 80% of the parent container */
        border: 1px solid black;
    }
</style>

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

🔹 Output: The table width will adjust dynamically based on the parent container’s width.

Controlling Column Width

You can control individual column widths using the <colgroup> tag or CSS.

Using `colgroup` to Define Column Widths

<table border="1">
    <colgroup>
        <col style="width: 70%;">
        <col style="width: 30%;">
    </colgroup>
    <tr>
        <td>Column 1 (70%)</td>
        <td>Column 2 (30%)</td>
    </tr>
</table>

🔹 Output: The first column takes 70%, and the second column takes 30% of the table width.

Responsive Table Width for Mobile Devices

Using CSS for a Fully Responsive Table

<style>
    table {
        width: 100%; /* Full width on all devices */
        max-width: 800px; /* Maximum width */
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }
</style>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

Best Practice:

✅ Use width: 100% for tables that adapt to different screen sizes.
✅ Use max-width to prevent tables from becoming too wide on large screens.