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