How to Set Column Widths in a Table for an Inbox-Style Layout?

Setting Table Column Width

Creating a visually appealing and functional table often involves customizing the width of its columns. In the case of a basic inbox-style table, the goal is to set specific widths for the "From," "Subject," and "Date" columns, ensuring they occupy different percentages of the page width.

To achieve this customization, the CSS width property is employed in conjunction with the col element. This element resides within the colgroup element, which defines the column layout. By assigning a width value to each column, we can control its size.

Here's an example using inline CSS attributes:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

This code snippet sets the table to occupy the entire page width, while defining three columns with specific percentages:

• "From": 15% of the page width
• "Subject": 70% of the page width
• "Date": 15% of the page width

The above is the detailed content of How to Set Column Widths in a Table for an Inbox-Style Layout?. For more information, please follow other related articles on the PHP Chinese website!