Multiple Col Elements

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,062,130
3.	Videos	353,313
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,246
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Tables
Multiple Col Elements

Multiple Col Elements

If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:

<!DOCTYPE html>
<html>
<head>
<title>Multiple Col Elements</title>
</head>
<body>

<h2>Multiple Col Elements</h2>
<p>Add multiple col elements in the colgroup:</p>

<table style="width: 100%;">
  <colgroup>
    <col span="1" style="background-color: #D6EEEE">
    <col span="1" style="background-color: pink">
  </colgroup>
  <tr>
    <th>#</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Taranpreet Singh</td>
    <td>6th</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Mehakpreet Kaur</td>
    <td>7th</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>Veerpal Kaur</td>
    <td>8th</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Jasmeen</td>
    <td>9th</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sonia</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>6.</td>
    <td>Jaskaran Singh</td>
    <td>11th</td>
  </tr>
  <tr>
    <td>7.</td>
    <td>Arshdeep Kaur</td>
    <td>12th</td>
  </tr>
  
</table>

</body>
</html>

Live Demo & Try it yourself!

Output

YouTube » » https://www.youtube.com/watch?v=NDnp-8eFdQ0

#HTML #table #Colgroup #multiple colgroup

CSPunjab.Com

Multiple Col Elements

« Previous

If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:

<!DOCTYPE html>
<html>
<head>
<title>Multiple Col Elements</title>
</head>
<body>

<h2>Multiple Col Elements</h2>
<p>Add multiple col elements in the colgroup:</p>

<table style="width: 100%;">
  <colgroup>
    <col span="1" style="background-color: #D6EEEE">
    <col span="1" style="background-color: pink">
  </colgroup>
  <tr>
    <th>#</th>
    <th>Name of Student</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Taranpreet Singh</td>
    <td>6th</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Mehakpreet Kaur</td>
    <td>7th</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>Veerpal Kaur</td>
    <td>8th</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Jasmeen</td>
    <td>9th</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sonia</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>6.</td>
    <td>Jaskaran Singh</td>
    <td>11th</td>
  </tr>
  <tr>
    <td>7.</td>
    <td>Arshdeep Kaur</td>
    <td>12th</td>
  </tr>
  
</table>

</body>
</html>