Column groups with col element in HTML and CSS

Description

The following code shows how to column groups with col element.

Example


<html>
<!--from   w w  w.  j  av a2  s.co m-->
<head>
<title>Column groups</title>
<!-- the style element is colvered in the sections on CSS -->
<style type="text/css">
.mainColumns {background-color:#efefef;width:50px;}
.totalColumn {background-color:#d6d6d6;width:100px;}
</style>
</head>

<body>

<table>
<colgroup span="6">
<col span="5" width="100" class="mainColumns" />
<col span="1" width="200" class="totalColumn" />
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>

Click to view the demo

The code above generates the following result.

Column groups with col element in HTML and CSS

Home »
  HTML CSS Tutorial »
    Table »
      Table Structure

HTML CSS Tutorial Table Structure
Add table caption to a table in HTML and CS...
Add table cell(table data) to a table in HT...
Add table footer to a table in HTML and CSS
Add table header to a table in HTML and CSS
Add vertical header or row header to a tabl...

Column groups with col element in HTML and ...

Create a Table with Longer Cell Content in ...
Create a nested table in HTML and CSS
Create a table with columns and rows in HTM...
Float table around text in HTML and CSS
Group column using colgroup in HTML and CSS
Span Cell to two rows in HTML and CSS
Span a table cell to Multiple Columns in HT...