Tag Archives: cell

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>

Tables

This tutorial explains how to create a table in HTML and populate the table rows and columns with data. Tables can be used to organise and display a range of information but should not be used for creating a web page layout – you should use divs or other tags for web page layouts.

The example table created in the video will look like the one below. We will look at how to apply styles to a table later on but in this tutorial we will focus on creating the headings and adding rows of data.

GamesList

Tables can be used for a range of purposes such as displaying scores for teams on a sports website. They can also be used to display results from a database query. Make sure that when adding a table, you apply some CSS code to give it an effective theme which fits in with the rest of the webpage as the default table style is pretty plain and boring. You might even like to completely remove the border or just use a very light border or background colours on different rows or columns.

The main HTML tags used to create a table are:

  • table – this actually holds the whole table. Your rows and table data should be inside the table tags.
  • caption – this is optional and is used to add a caption to a table
  • th – this creates a heading for a column
  • tr – this creates a row in the table
  • td – this adds a cell of data to a table row

The number of td tags used in a row should generally match the number of headings in the table so that you don’t have any columns out of place.

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

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Tables</title>
 <link rel="stylesheet" href="resources/stylesheet18.css"/>
</head>
 
<body>
 <table border="1px">
 <caption>Top Selling Games on Steam</caption>
 <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>

There is no CSS code for this tutorial as not styling has been applied yet – this will be in the next tutorial!