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)