html table colspan

Colspan is an HTML attribute that is used inside HTML tables. HTML colspan attribute represents the number of columns in the table. Inside HTML tables colspan is used with <td> and <th> tags. Let’s know how to use colspan in HTML.

HTML Table Colspan Examples

If you want to merge two or more table cells together, then you can use the colspan attribute. We have some excellent examples of HTML colspan, after seeing which you will know what is colspan and how to use colspan in the HTML table.

<table>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<th>Name</th>
		<th>Age</th>
	</tr>
	<tr>
		<td>Demo</td>
		<td>60</td>
	</tr>
	<tr>
		<td>Dummy</td>
		<td>40</td>
	</tr>
	<tr>
		<td colspan="2">Total Employees</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Colspan Example 2

<table>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<th>Name</th>
		<th>Age</th>
	</tr>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<td>Demo</td>
		<td>60</td>
	</tr>
	<tr>
		<td>Dummy</td>
		<td>40</td>
	</tr>
	<tr>
		<td colspan="2">Total Employees</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Example  3

<table>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<th>Name</th>
		<th>Age</th>
	</tr>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<td>Demo</td>
		<td>60</td>
	</tr>
	<tr>
		<th colspan="2">Employees</th>
	</tr>
	<tr>
		<td>Dummy</td>
		<td>40</td>
	</tr>
	<tr>
		<td colspan="2">Total Employees</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Example 4

<table>
	<tr>
		<th colspan="2">Group 1</th>
		<th colspan="2">Group 2</th>
		<th colspan="2">Group 3</th>
	</tr>
	<tr>
		<th>Girls</th>
		<th>Boys</th>
		<th>Girls</th>
		<th>Boys</th>
		<th>Girls</th>
		<th>Boys</th>
	</tr>
	<tr>
		<td>43</td>
		<td>52</td>
		<td>66</td>
		<td>12</td>
		<td>53</td>
		<td>85</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Example 5

<table>
	<tr>
		<th colspan="2">Group 1</th>
		<th colspan="2">Group 2</th>
		<th colspan="2">Group 3</th>
	</tr>
	<tr>
		<th colspan="2">Girls/Boys</th>
		<th>Girls</th>
		<th>Boys</th>
		<th colspan="2">Girls/Boys</th>
	</tr>
	<tr>
		<td colspan="2">100</td>
		<td>66</td>
		<td>12</td>
		<td colspan="2">125</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Example 6

<table>
	<tr>
		<th colspan="2">Group 1</th>
		<th colspan="2">Group 2</th>
		<th colspan="2">Group 3</th>
	</tr>
	<tr>
		<th colspan="2">Girls</th>
		<th colspan="2">Boys</th>
		<th>Girls</th>
		<th>Boys</th>
	</tr>
	<tr>
		<td colspan="4">258</td>
		<td>53</td>
		<td>85</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Example 7

<table>
	<tr>
		<th colspan="2">Group 1</th>
		<th colspan="2">Group 2</th>
		<th colspan="2">Group 3</th>
	</tr>
	<tr>
		<th colspan="2">Girls</th>
		<th colspan="2">Boys</th>
		<th colspan="2">Childs</th>
	</tr>
	<tr>
		<td colspan="6">548</td>
	</tr>
</table>

table, th, td {
  border: 1px solid #000;
}

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

How do I link CSS to HTML?
To link CSS with HTML
, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is text formatting in HTML?
To make the text appear well, the text is formatted with a few HTML tags.

What is BR tag?
br tag is used to break the line.

What is the HTML code for bold?
You can use b tag and strong tag to bold your text.

What does </ B mean in HTML?
b tag means “bold”.

Related: Best 8 examples of using CSS background position property