Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 2.9: Tables

Tables are one of the more powerful features of HTML. While they are not overly complicated to build, they do require that the designer track information about the table making them prone to errors. It is not just the designer who makes errors when building tables, but some extremely popular browsers don’t always render the table the way it is supposed to be represented. This means that if you have a complex table, you may want to test on several browsers to see if it renders properly. If it doesn't, but it renders in an acceptable way, then that will work as well. One of the tables on my demo demonstrates such a rendering issue at the time the chapter was written.

Tables are used to present rows and columns of data, though they are flexible and so can be used to do other things. One common, and now frowned upon, use of tables in the early days was to format the page. This is not a good use of tables as it is hard for screen readers. Academics are also annoyed because it reduces semantic exploration of your page, which also can affect search engines.

Unfortunately, the move to CSS has resulted in some commonly used attributes of table to be depreciated. Depreciated attributes are not guaranteed to be used by future versions of browsers so should not be used. However, in order to see the borders of the table, we would either need to use CSS or use the depreciated border attribute. I don’t like using things that have not been covered so am opting to use the depreciated tag, but the proper way to do it would be to have the following tags set up in the head section of your document:

<!-- "Magic CSS code" here to simulate border="1" attribute -->
<style>
table, td, th {
border: 1px solid;
}
</style>

This code simply does the same as adding borer=”1” to the table tag, but is not depreciated so will work in the future. There are better ways of doing this, which we will explain in the CSS Basics chapter.

To create a table, you simply need a <table> tag to indicate you are creating a table. Between the starting and ending of the table tags, you have additional tags to describe the table. If you wish to have a caption for the table, you would use a <caption> tag.

Tables are made up of rows and columns. Each row of the table has a <tr> tag, which can be interpreted as table row. Rows are made up of the cells that make up the columns so for every column, you need either a <th> table header or a <td> table data tag to provide information about what you want to show in the cell. Without CSS, tables will adjust their column and row sizes based on the data that is in the cell. Here is a sample of a table:

<table>
  <caption>Additive color table</caption>
  <tr>
    <td></td>
    <th>red</th>
    <th>green</th>
    <th>blue</th>
  </tr>
  <tr>
    <th>red</th>
    <td>red</td>
    <td>yellow</td>
    <td>purple</td>
  </tr>
  <tr>
    <th>green</th>
    <td>yellow</td>
    <td>green</td>
    <td>cyan</td>
  </tr>
  <tr>
    <th>blue</th>
    <td >purple</td>
    <td>cyan</td>
    <td>blue</td>
  </tr>
</table>

Additive color table
red green blue
red red yellow purple
green yellow green cyan
blue purple cyan blue

The contents of a cell do not have to be just text. You can have any HTML element, including other tables, within the cell of a table. The tableDemo.html example shows a demo of having tables within tables. Below is a table showing how images can be part of a table. This table contains the tiles used in the game Mr. Holeman which is a puzzle game I am planning on porting over to JavaScript as part of my game engine book.

ID Editor tile Game tile Description
0 empty tile empty tile Empty tiles that player/slimes can move through
1 fake floor tile floor tile Empty tiles that looks like floor so player falls through
2 fake grass tile grass tile Empty tiles that looks like grass but player falls through
3 fake steel tile steel tile Empty tiles that looks like steel but player falls through
4 hole tile hole tile Portable hole when deployed over solid tile
5 floor tile floor tile Floor player can walk on
6 grass tile grass tile Grass player can walk on
7 steel tile steel tile Steel can be walked on but portable holes don't work on it
8 ladder tile ladder tile Ladders allow for climbing
9 rope tile rope tile Ropes allow for slow climbing
10 chain tile chain tile Chains can be used to move over gaps
11 portable hole tile portable hole tile Portable holes can be moved around and let pass through solid tiles
12 Gem tile Gem tile Gems that the player has to collect
13 exit tile empty tile Exit from level only appears when all gems gathered
14 player tile player tile The player
15 slime tile slime tile Enemy slimes

The code for a couple of the rows:

<tr>
  <td>1</td>
  <td><img src="holemanTiles/01_FakeFloor.png" alt="fake floor tile"/></td>
  <td><img src="holemanTiles/05_Floor.png" alt="floor tile"/></td>
  <td>Empty tiles that looks like floor so player falls through</td>
</tr>

<tr>
  <td>8</td>
  <td><img src="holemanTiles/08_Ladder.png" alt="ladder tile"/></td>
  <td><img src="holemanTiles/08_Ladder.png" alt="ladder tile"/></td>
  <td>Ladders allow for climbing</td>
</tr>

Where tables start to get tricky is when we get into columns that span multiple rows and rows that span multiple columns. This is fairly common in tables, usually as part of the headers for the table. The number of columns that a cell takes up is part of the <th> or <td> tag and takes the form of a colspan attribute with the value of the span being the number of columns that the cell takes up. It is the designers responsibility to track these columns as the next <th> or <td> will be for the column after the span. Below is a Gantt chart showing how column spans can be used. A Gantt chart is simply a schedule showing what person is working on what task at which point during the schedule.

<table>
  <caption>GANTT Chart horizontal</caption>
  <tr>
    <td></td>
    <th>week 1</th>
    <th>week 2</th>
    <th>week 3</th>
    <th>week 4</th>
    <th>week 5</th>
  </tr>
  <tr>
    <th>Billy</th>
    <td colspan="3">task A</td>
    <td>task B</td>
    <th>spare</th>
  </tr>
  <tr>
    <th>Bob</th>
    <td colspan="5">task C</td>
  </tr>
  <tr>
    <th>Patricia</th>
    <td colspan="2">task D</td>
    <th>spare</th>
    <td colspan="2">task E</td>
  </tr>
</table>

GANTT Chart horizontal
week 1 week 2 week 3 week 4 week 5
Billy task A task B spare
Bob task C
Patricia task D spare task E

Spanning rows works the same way but can be even more hard to track as you need to keep track of which columns in the above rows span into the current row you are building.

<table>
  <caption>GANTT Chart vertical</caption>
  <tr>
    <td></td>
    <th>Billy</th>
    <th>Bob</th>
    <th>Patricia</th>
  </tr>
  <tr>
    <th>week 1</th>
    <td rowspan="3">Task A</td>
    <td rowspan="5">Task C</td>
    <td rowspan="2">Task D</td>
  </tr>
  <tr>
    <th>week 2</th>
  </tr>
  <tr>
    <th>week 3</th>
    <td>spare</td>
    </tr>
  <tr>
    <th>week 4</th>
    <td>Task B</td>
    <td rowspan="2">Task E</td>
  </tr>
  <tr>
    <th>week 5</th>
    <td>Spare</td>
  </tr>
</table>

GANTT Chart vertical
Billy Bob Patricia
week 1 Task A Task C Task D
week 2
week 3 spare
week 4 Task B Task E
week 5 Spare

Doing both is also possible. As the code is similar enough to existing code, I will leave it out but the code is in the demo. This is where bugs in browsers show up. As you can see by the first screenshot, the table is formatted as expected. The second browser, it is not. Quirks between browsers and rendering more complex things do exist and will likely exist well after AI takes over the world and enslaves us.

compas table rendered correctly and incorrectly

Likewise, the tableDemo.html file also contains a table that has other tables for it’s cells. The code for that is not presented here.

Horizontal GANTT chart Vertical GANTT chart
GANTT Chart horizontal
week 1 week 2 week 3 week 4 week 5
Billy task A task B spare
Bob task C
Patricia task D spare task E
GANTT Chart vertical
Billy Bob Patricia
week 1 Task A Task C Task D
week 2
week 3 spare
week 4 Task B Task E
week 5 Spare

Tables have a lot more power when you add style options to them, which will happen in the next chapter.

Sidebar

Chapter 2 Contents

2.1 HTML Basics Cheat Sheet

The cheat sheet for this chapter.

2.2 What is HTML

A brief history of HTML

2.3 Structure of a HTML Document

What makes up a HTML file

2.4 Tags and Elements

How tags are used to create HTML elements

2.5 Special Symbols

How to display things such as <, >, &, 😀

2.6 Links

Linking to other pages, other sites, and within the page

2.7 Images

Adding images and image maps to your page.

2.8 Lists

Ordered and unordered lists and nesting lists.

2.9 Tables

Tables with spanning rows and columns.

2.10 HTML Only Game Project

The game of NIM is the project for this chapter.

2.11 HTML Only Game Solution

How my solution to the NIM game was put together

Bonus article

Solving Nim.

← previous section
Lists
next section →
HTML Only Game Project
Table of Contents