Empty Colgroups

#	Content	Views
1.	Tutorial Tags	37,059
2.	Tutorial + Programming	1,061,870
3.	Videos	353,240
4.	Results (`Annual + Re-appear`)	44,847
5.	Quiz Chapters	37,081
6.	Quiz Questions	540,074
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,245
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,476
13.	Downloads (Syllabus)	2,638

Home
HTML
Tables
Empty Colgroups

Empty Colgroups

If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles) for the columns before:

<!DOCTYPE html>
<html>
<head>
<title>Empty Colgroups</title>
</head>
<body>

<h2>Empty Colgroups</h2>
<p>Add "empty" col elements that represents the columns before the columns you want to style:</p>

<table style="width: 100%;">
<colgroup>
  <col span="1">
  <col span="2" 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 #empty

CSPunjab.Com

Empty Colgroups

« Previous

If you want to style columns in the middle of a table, insert a "empty" <col> element (with no styles) for the columns before:

<!DOCTYPE html>
<html>
<head>
<title>Empty Colgroups</title>
</head>
<body>

<h2>Empty Colgroups</h2>
<p>Add "empty" col elements that represents the columns before the columns you want to style:</p>

<table style="width: 100%;">
<colgroup>
  <col span="1">
  <col span="2" 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>