DEV Community

Cover image for HTML : Applying styles to entire columns of table
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on

HTML : Applying styles to entire columns of table

<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.

Top comments (0)

šŸ‘‹ Kindness is contagious

Please leave a ā¤ļø or a friendly comment on this post if you found it helpful!

Okay