Code has been added to clipboard!

Columns HTML

Reading time 2 min
Published Mar 19, 2019
Updated Oct 1, 2019

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
<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>

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.
Udacity
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

span

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

Example
<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>

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
<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
<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
<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
<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
<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

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/02/2021
3176 People Used
Only 97 Left
Rating
5.0