HTML | colgroup Width Attribute

<colgroup> tag in HTML is used to specify the properties of one or more columns in a table. The width attribute of <colgroup> tag is used to specify the width of the columns.

Syntax

The width attribute can be added to <colgroup> tag in the following way:

<colgroup width="value"></colgroup>

Here, value can be a number or a percentage value.

Example

Consider the following table:

<table>
  <colgroup>
    <col width="20%">
    <col width="30%">
    <col width="50%">
  </colgroup>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1a</td>
    <td>Data 1b</td>
    <td>Data 1c</td>
  </tr>
  <tr>
    <td>Data 2a</td>
    <td>Data 2b</td>
    <td>Data 2c</td>
  </tr>
</table>

In this example, we have used <colgroup> tag to specify the width of the three columns. The first column has a width of 20%, the second column has a width of 30%, and the third column has a width of 50%.

Note

• The width attribute should be used only with <colgroup> tag and not with <col> tag.
• If the sum of the width attribute values of all the columns in a table exceeds 100%, the table may become wider than the containing element and may require horizontal scrolling on smaller screens.

In conclusion, the width attribute of <colgroup> tag is a useful tool to specify the width of columns in a table. It provides greater flexibility in table design and presentation.