HTML : Applying styles to entire columns of table
Rajesh Kumar Yadav
Posted on May 27, 2021
<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>
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.
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.
💖 💪 🙅 🚩
Rajesh Kumar Yadav
Posted on May 27, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.