Learn To Change HTML Table Column Width - BitDegree

Contents

• 1. Columns HTML: Main Tips
• 2. Use of col
• 2.1. span
• 3. Deprecated Attributes
• 4. Browser support

Columns HTML: Main Tips

• The <col> element defines and styles columns in HTML.
• The <colgroup> element is the parent of <col>.
• HTML <col> tag might seem suitable for styling columns, but it has limitations and disadvantages.

Use of col

The HTML <col> element specifies attributes for columns in a <colgroup> element.

Example Copy <table> <colgroup> <col style="background-color: bisque;"> </colgroup> <tr> <th>Subject</th> <th>Score</th> </tr> <tr> <td>HTML</td> <td>87</td> </tr> </table> Try it Live Learn on Udacity

Tip: you don't need to include the closing <col> tag in HTML documents.

There are several issues with the use of <col> element for grouping columns in HTML:

• Columns do not actually include the individual cells: it's rows, not columns, that define tables in HTML. Therefore, the styles used on rows can replace the styles of columns in HTML.
• The <col> element manipulates a limited number of CSS properties: visibility, width, background, and border. For example, you cannot change the text color.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

span

The span attribute specifies how many columns the <col> element contains.

Example Copy <table> <colgroup> <col span="1" style="background-color: cornsilk;"> <col style="background-color: bisque;"> </colgroup> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>White Tape</td> <td>$23</td> </tr> </table> Try it Live Learn on Udacity

Deprecated Attributes

align

It set the horizontal alignment of content belonging to the <col> element. Not supported in HTML5: apply the CSS text-align property instead.

Example Copy <table style="width: 100%;"> <col align="left"> <col align="right"> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>Biscuit</td> <td>$5</td> </tr> </table>

char

It indicated the character to align the cells in a table to. Not supported in HTML5.

Example Copy <table style="width: 100%;"> <col align="left"> <col align="char" char="."> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ryan</td> <td>$100.00</td> </tr> <tr> <td>Franklin</td> <td>$70.00</td> </tr> </table>

charoff

It specified how many characters will offset the column data from the alignment characters. Not supported in HTML5.

Example Copy <table style="width: 100%;"> <col align="left"> <col align="char" char="." charoff="2"> <tr> <th>Name</th> <th>Earnings</th> </tr> <tr> <td>Patrick</td> <td>$140.00</td> </tr> <tr> <td>Samantha</td> <td>$220.00</td> </tr> </table>

valign

It set the vertical alignment rules for the content of the <col> element. Since HTML5 does not support this attribute, use vertical-align property instead.

Example Copy <table style="height: 200px;"> <col valign="top"> <col valign="bottom"> <tr> <th>Name</th> <th>Position</th> </tr> <tr> <td>Daniel</td> <td>Executive</td> </tr> </table>

width

It defined the HTML table column width for a <col> element. Not supported in HTML5: use the CSS property called width as an alternative.

Example Copy <table> <col width="130"> <col width="80"> <tr> <th>Name</th> <th>Department</th> </tr> <tr> <td>Daniel</td> <td>Management</td> </tr> <tr> <td>Patrick</td> <td>Sales</td> </tr> </table>

Browser support

Chrome

1+

Edge

All

Firefox

1+

IE

All

Opera

All

Safari

All

Mobile browser support

Chrome

All

Firefox

4+

Opera

All

Safari

All