Table rowspan using CSS example.

How to Include 2 Columns Under One Column Header in HTML Table?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

In this tutorial, you will learn how to include 2 columns under one column header in HTML table. In HTML, this feature is called COLSPAN and ROWSPAN.

Steps to Include 2 Columns Under One Column in HTML Table using ROWSPAN

 

CSS for site_body.css used in the Script

body { margin:0px; padding:20px; padding-top:0px; width:680px; 
font-family:verdana,arial,sans-serif; font-size:18px; }
h1 { margin:0; margin-top:10px; margin-bottom:20px; font-size:30px; }
h2 { margin-top:20px; margin-bottom:3px; font-size:20px; font-weight:normal; font-style:italic; }

CSS for page_table.css used in the Script

table { width:auto; height:1px; table-layout:auto; border-collapse:collapse; 
margin-left:20px; border:1px solid black; }

td, th { width:50px; height:1px; overflow:hidden; visibility:visible;
border:1px solid black; padding:5px; background:gold; 
text-align:center; vertical-align:middle; text-indent:5px; }

The script for the HTML Header Part:

<link rel="stylesheet" href="site_body.css" media="all" type="text/css" />
<link rel="stylesheet" href="page_table.css" media="all" type="text/css" />

The script for the HTML Body Part:

<h1>Table</h1>
<table> 
<tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr> 
<tr> <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> <td>12</td> </tr>
</table>

<h2>Simple Table</h2>
<table> 
<tr> <th>1</th> <th>2</th> <th>3</th> <th>4 </th> <th>5 </th> <th>6 </th> </tr> 
<tr> <th>7</th> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> 
</table>

Output

See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.