HTML : Applying styles to entire columns of table

Rajesh Kumar Yadav - May 27 '21 - - Dev Community
<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>
               Column 1
               <!--This column will have 40% width-->
            </td>
            <td>
               Column 2
               <!--This column will have 60% width-->
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>,<tbody>, <tfoot>, and <tr> elements.

Here you can see we have used <colgroup> tag which specifies a group of one or more columns in a table for formatting purpose. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .