HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Set the background color of the three columns with the <colgroup> and <col> tags
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
<colgroup> tag must be a child of a <table> element,
after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr>
elements.
<colgroup>,
use the <col> tag within the <colgroup> tag.
| Element | |||||
|---|---|---|---|---|---|
| <colgroup> | Yes | Yes | Yes | Yes | Yes |
| Attribute | Value | Description |
|---|---|---|
| span | number | Specifies the number of columns a column group should span |
The <colgroup> tag also supports the Global Attributes in HTML.
The <colgroup> tag also supports the Event Attributes in HTML.
Align text in table columns (with CSS):
<table style="width:100%">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td style="text-align:right">$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td style="text-align:right">$47</td>
</tr>
</table>
Vertical-align text in table columns (with CSS):
<table style="height:200px">
<tr>
<th>Month</th>
<th
style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td
style="vertical-align:bottom">$100</td>
</tr>
</table>
Specify width of a table column (with CSS):
<table>
<tr>
<th
style="width:200px">Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
HTML DOM reference: ColumnGroup Object
Most browsers will display the <colgroup> element with the following default values:
colgroup {
display: table-column-group;
}