Tables – Part 2 (Colspan and rowspan)

This tutorial explains how to use the colspan and rowspan properties in a table. These properties allow you to spread a cell over multiple columns or rows. The images below show how the rowspan and colspan properties can be used.

Using the rowspan property
Using the rowspan property
Using the colspan property
Using the colspan property

The colspan and rowspan properties basically allow you to customise the layout and arrangement of data in a table. Along with some CSS code to create a theme for your table, these properties can be used to make a boring meaningless table into an effective table that conveys the information it stores in an effective manner.

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code using the rowspan property:

<!DOCTYPE html>
<html>
<head>
 <title>Tables - Part 2 (colspan and rowspan)</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <tr>
 <td rowspan="6">Top Selling Games on Steam</td>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>

Here is the sample HTML code using the colspan property:

<!DOCTYPE html>
<html>
<head>
 <title>Tables - Part 2 (colspan and rowspan)</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <tr>
 <td colspan="3">Top Selling Games on Steam</td>
 </tr>
 <tr>
 <th>Rank</th>
 <th>Title</th>
 <th>Developer</th>
 </tr>
 <tr>
 <td>1</td>
 <td>ARK: Survival Evolved</td>
 <td>Studio Wildcard</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Fallout 4</td>
 <td>Bethesda Game Studios</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Grand Theft Auto 5</td>
 <td>Rockstar</td>
 </tr>
 <tr>
 <td>4</td>
 <td>LEGO Worlds</td>
 <td>TT Games</td>
 </tr>
 <tr>
 <td>5</td>
 <td>The Witcher 3: Wild Hunt</td>
 <td>CD Projekt Red</td>
 </tr>
 
 </table>
</body>
</html>