HTML: Tag - TechOnTheNet

Có thể bạn quan tâm

Home
HTML

HTML: <colgroup> tag

This HTML tutorial explains how to use the HTML element called the <colgroup> tag with syntax and examples.

Description

The HTML <colgroup> tag groups a set of columns in an HTML table so that you can apply formatting or add classes to the group instead of each individual cell. This tag is also commonly referred to as the <colgroup> element.

Syntax

In HTML, the syntax for the <colgroup> tag is: (example of a table where the first three columns have a background color of #FFF9C4 and the last column has a yellow background)

<body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4;"> <col style="background-color:yellow;"> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <colgroup> tag:

Attribute	Description	HTML Compatibility
align	Horizontal alignment of text in each cell within the column group. It can be one of the following values: left, center, right, justify, char	Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
bgcolor	Background color of each cell within the column group	Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
char	Set the character to align the cells in a column group	Deprecated in HTML 4.01, Obsolete in HTML5
charoff	Number of characters to offset column data from the alignment characters (in char attribute)	Deprecated in HTML 4.01, Obsolete in HTML5
span	Integer value indicating the number of columns that the column group spans	HTML 4.01, HTML5
valign	Vertical alignment of text of each cell within the column group. It can be one of the following values: baseline, bottom, middle, top	Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
width	Default width for each column in the column group. The width can be expressed in pixels, a percentage value or relative width.	HTML 4.01, Obsolete in HTML5

Note

The HTML <colgroup> element is found in an HTML table within the <body> tag.
The <colgroup> tag must appear after the <caption> in a table but before the <thead>, <tr>, <th>, <tbody> and <tfoot> tags in a table.

Browser Compatibility

The <colgroup> tag has basic support with the following browsers:

Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Example

We will discuss the <colgroup> tag below, exploring examples of how to use the <colgroup> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

If you created a new web page in HTML5, your <colgroup> tag might look like this:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example by www.techonthenet.com</title> </head> <body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4;"> <col style="background-color:yellow;"> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body> </html>

In this HTML5 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <colgroup> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML 4.01 Transitional Example by www.techonthenet.com</title> </head> <body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4;"> <col style="background-color:yellow;"> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body> </html>

In this HTML 4.01 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <colgroup> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title> </head> <body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4" /> <col style="background-color:yellow;" /> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body> </html>

In this XHTML 1.0 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <colgroup> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHTML 1.0 Strict Example by www.techonthenet.com</title> </head> <body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4" /> <col style="background-color:yellow;" /> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body> </html>

In this XHTML 1.0 Strict Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <colgroup> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHTML 1.1 Example by www.techonthenet.com</title> </head> <body> <table> <colgroup> <col span="3" style="background-color:#FFF9C4" /> <col style="background-color:yellow;" /> </colgroup> <thead> <tr> <th>Item</th> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Bananas</td> <td>5</td> <td>$12</td> <td>$60</td> </tr> </tbody> </table> </body> </html>

In this XHTML 1.1 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

NEXT: <col> next

Share on:

Databases

SQL
Oracle / PLSQL
SQL Server
MySQL
MariaDB
PostgreSQL
SQLite

MS Office

Excel
Access
Word

Web Development

HTML
CSS
JavaScript
Color Picker

Programming

C Language

ASCII
Unicode
Linux
UNIX
Techie Humor

HTML Elements

<!DOCTYPE>
<a>
<abbr>
<address>
<area>
<article>
<aside>
<b>
<base>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<dfn>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<marquee>
<menu>
<meta>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<pre>
<q>
<s>
<script>
<section>
<select>
<small>
<span>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<u>
<ul>

Deprecated HTML Elements

<acronym>
<basefont>
<big>
<center>
<font>
<strike>

Home | About Us | Contact Us | Testimonials | Donate

While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.

Từ khóa » Html Colgroup Background Color

HTML: Tag - TechOnTheNet

Description

Syntax

Sample Output

Attributes

Note

Browser Compatibility

Example

HTML5 Document

HTML 4.01 Transitional Document

XHTML 1.0 Transitional Document

XHTML 1.0 Strict Document

XHTML 1.1 Document

Databases

MS Office

Web Development

Programming

More

HTML Elements

Deprecated HTML Elements

HTML Colgroup Tag - W3Schools

HTML Table Colgroup - W3Schools

Colgroup Background Color Not Override Tr Background Color

: The Table Column Group Element - MDN Web Docs

HTML | Bgcolor Attribute - GeeksforGeeks

HTML Colgroup Tag - Web4College

HTML Col, Colgroup Tutorial With Examples - O7planning

HTML Colgroup Tag - Dofactory

Set Background For Column Group In HTML And CSS

HTML Tag - W3docs

HTML Table Colgroup - ForgeGeek

What Is Colgroup Tag In HTML?

HTML - Colgroup Tag - Tutorialspoint

HTML Colgroup Tag | How To Specify Table Background Style?

Liên Hệ