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 tiles that player/slimes can move through
1			Empty tiles that looks like floor so player falls through
2			Empty tiles that looks like grass but player falls through
3			Empty tiles that looks like steel but player falls through
4			Portable hole when deployed over solid tile
5			Floor player can walk on
6			Grass player can walk on
7			Steel can be walked on but portable holes don't work on it
8			Ladders allow for climbing
9			Ropes allow for slow climbing
10			Chains can be used to move over gaps
11			Portable holes can be moved around and let pass through solid tiles
12			Gems that the player has to collect
13			Exit from level only appears when all gems gathered
14			The player
15			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.

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.