BBM Tutor
BBM Tutor

HTML5 Tag - <col>

Definition & Uses of HTML5 <col>

The HTML5 <col> tag is not a new tag but it has been redefined. The attributes called align, char, charoff, valign, width are deprecated in HTML5.

Syntax of HTML5 <col> Tag

<col span="Non-Negative Integer Number Greater Than Zero"/>

What is HTML5 <col> ?

  • The <col> tag defines a table column.
  • It represents one or more columns in the column group represented by its colgroup parent.
  • It must be used within a colgroup element.
  • The <col> elements are empty and serve only as a support for attributes.
  • The col element is a void element. It must have a start tag but must not have an end tag.

Where to use HTML5 <col> Tag?

  • The <col> tag is used for specifying column properties for each column within a colgroup.
  • It is useful for applying styles to entire columns, instead of repeating the styles for each cell and for each row.

Tips & Notes

  • Use this tag only if the values of each column is different, Otherwise specify the properties as a part of colgroup element.
  • The col element is the child of colgroup element which itself is a child of table element.

Simple HTML5 Example #1

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <col> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<table>
<caption><col> Tag Example</caption>
<colgroup>
<col style="width:20%; background-color:#999999;"/>
<col span="5" style="background-color:#CCCCCC;"/>
</colgroup>
<thead>
<tr>
<th rowspan="2" style="background-color:#FFFFFF"></th>
<th colspan="5">Time Table</th>
</tr>
<tr style="vertical-align: bottom; background-color:#999999">
<th>10.00 am - 11.30 am</th>
<th>11.30 am - 1.00 pm</th>
<th>1.00 pm - 2.00 pm</th>
<th>2.00 pm - 3.30 pm</th>
<th>3.30 pm - 5.00 pm</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">Have a nice day....</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Monday /td>
<td>Major 1 </td>
<td>Allied 1 </td>
<td rowspan="4">Lunch </td>
<td>Major 2 </td>
<td>Allied 2 </td>
</tr>
<tr>
<td>Tuesday/td>
<td>Major 2 </td>
<td>Allied 2 </td>
<td>Major 1</td>
<td>Allied 1 /td>
</tr>
<tr>
<td>Wednesday </td>
<td>Allied 1 </td>
<td>Major 1 </td>
<td>Allied 2 </td>
td>Major 2 </td>
</tr>
<tr>
<td>Thursday </td>
<td>Allied 2 </td>
<td>Major 2 </td>
<td>Major 1 </td>
<td>Allied 1/td>
</tr>
</tbody>
</table>
</article>
</body>
</html>

Output Screen

<col> Tag Example
Time Table
10.00 am - 11.30 am 11.30 am - 1.00 pm 1.00 pm - 2.00 pm 2.00 pm - 3.30 pm 3.30 pm - 5.00 pm
Have a nice day....
Monday Major 1 Allied 1 Lunch Major 2 Allied 2
Tuesday Major 2 Allied 2 Major 1 Allied 1
Wednesday Allied 1 Major 1 Allied 2 Major 2
Thursday Allied 2 Major 2 Allied 1 Allied 2

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <col> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Specifies the number of columns have to span

span

  • It defines the number of consecutive cells to which col attributes should apply.
  • This attribute's value must be a valid non-negative integer greater than zero.
  • Possible value:
  • Number of columns

Element-Specific Attributes Not Supported in HTML5

Attributes

Description

align
Specifies the alignment of the content inside the column
char
sets the character to which cell contents should align
charoff
Specifies an alignment offset (either in pixels or percentage value) for the alignment character (first occurrence) on each line.
valign
Specifies vertical alignment
width
Specifies a default width for each column spanned by the current col element
BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.