Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use of colgroup tag in html

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 177
    Comment on it

    <colgroup> tag:

    It is used to apply different properties on more than one column in a table by grouping columns. Like with the help of this tag we can apply CSS on more than one column otherwise we have to apply CSS individually on each column and row.

    We can also use other attribute with colgroup tag  which are as follows:

     

    Attribute Value
    align left, right, center, justify, char
    width pixels, %, relative_length
    charoff number
    span number
    valign top, middle, bottom, baseline

     

    Using col tag within colgroup tag we  can provide different properties for columns.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th, td {
        border: 2px solid black;
    }
    </style>
    </head>
    <body>
    
    <table class="table1">
      <colgroup>
        <col span="2" style="background-color:grey">
        <col style="background-color:white">
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone Number</th>
      </tr>
      <tr>
        <td>Ashley</td>
        <td>Christchurch</td>
        <td>55547862214</td>
      </tr>
      <tr>
        <td>Michael</td>
        <td>Sydney</td>
        <td>56413289489</td>
      </tr>
      <tr>
        <td>Smith</td>
        <td>Christchurch</td>
        <td>96447862214</td>
      </tr>
    </table>
    
    </body>
    </html>
    

    In the above example using colgroup tag we have given grey background-color to first two columns and white color to the third one.

    You can check output here: https://jsfiddle.net/sp3od6nw/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: