Tables

A table is a simple way to display related objects in a way that makes sense.

For the purposes of this demonstration, I'm going to use one of the tables that Shraaaag's FUMBBL Scripts create, though I've removed all but the first few lines, as everything beyond that shows us nothing new.

In a code browser/editor, the code looks like this:
<table style='border-collapse:collapse;border-spacing:0px;font-size:1em;border:1px solid black;'><tr style='background: #000000; color: #FFFFFF;'><th>Top</th><th>Name</th><th>#</th></tr><tr class="odd"><th style='text-align:left;'>Games</th><td><a href='https://fumbbl.com/FUMBBL.php?page=player&player_id=7641485'>Lidgaeb</a></td><th>32</th></tr><tr class="even"><th style='text-align:left;'>Completions (53)</th><td><a href='https://fumbbl.com/FUMBBL.php?page=player&player_id=7647324'>Herannaan</a></td><th>11</th></tr><tr class="odd"><th style='text-align:left;'>Touchdowns (54)</th><td><a href='https://fumbbl.com/FUMBBL.php?page=player&player_id=7644028'>Udorcehl</a></td><th>10</th></tr></table>

Now then, that looks horrible, doesn't it!

Let's help ourselves to edit it, by putting the different tags on a different line, so the code looks like this:
<table style='border-collapse:collapse;border-spacing:0px;font-size:1em;border:1px solid black;'>
<tr style='background: #000000; color: #FFFFFF;'>
<th>
Top
</th>
<th>
Name
</th>
<th>
#
</th>
</tr>
<tr class="odd">
<th style='text-align:left;'>
Games
</th>
<td>
<a href='https://fumbbl.com/FUMBBL.php?page=player&player_id=7641485'>Lidgaeb
</td>
<th>
32
</th>
</tr>
<tr class="even">
<th style='text-align:left;'>
Completions (53)
</th>
<td>
<a href='https://fumbbl.com/FUMBBL.php?page=player&player_id=7647324'>Herannaan
</td>
<th>
11
</th>
</tr>
</table>

The basic syntax of a table in HTML is pretty simple, but we need to remember what a table is, a table is a collection of columns and rows, used to display data in a logical fashion

<table>: This tag opens the table, and can be used to set the properties that will be applied to the entire table
<tr>: This tag begins a new row and can be used to set properties for a specific row
<td>: This tag opens a new data cell, which is used to actually store the data that you want to display in the table
<th>: This tag declares a new Header cell, and is used in the same places as a td tag would be, except that it is a header, and as such, the input is bold and centred (unless you define it otherwise)

Of course, each of these tags has a respective closing tag: </table>, </tr>, </td> and </th> respectively.

Controlling the layout of a table.

By default, a table will simply be as wide as the text you put in it, however the use of the width attribute enables control of the horizontal size of the table. The width attribute can be used with pixels or % values, and hence looks a bit like this:
<table width="100%">
or
<table width="100px">

The Width of each column can also be defined precisely, however, each column need only be defined once, and redefining the width of columns produces undefined results (it'll be different in every browser).

A table is also the simplest way to put words over an image, using the background attribute in the opening table tag, or indeed in any other tags for the table, to get different images behind different cells/rows
A table with a background image, would have an opening tag that looked something like this: <table background="URL of background image" other attributes>...table continues here.

That's the fundamentals of HTML dealt with, I guess it's time to dig a little deeper...

However, it's the end of the page, and the article continues on the next one