Table rowspan using CSS example.

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

  • 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:

<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>

<h2>Simple Table</h2>
<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> 


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