🧩 Using HTML Tables in Geocaching Pages
Tables are a powerful way to organize content on your cache pages. This guide walks you through how to create and customize tables using HTML.
📐 Basic Table Structure
Example 1: Simple Table with Border
<table width="100%" border="1">
<tr>
<td>This is a table with a plain border</td>
<td>the full width of the page</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>
<table>defines the tablewidth="100%"makes it span the full pageborder="1"adds a visible border
🚫 Table Without Border
Example 2: No Border
<table width="100%">
<tr>
<td>This is a table with no border</td>
<td>It is still a table</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>
Just remove the border attribute to hide the border.
📏 Custom Widths
Example 3: Half-Width Table with Uneven Columns
<table width="50%">
<tr>
<td width="75%">This table is only half the page width</td>
<td width="25%">This cell is shorter than the first one</td>
</tr>
<tr>
<td>There is no border</td>
<td>This cell is also shorter.</td>
</tr>
</table>
Use width on <td> to control column sizes.
🎨 Background Colors
Example 4: Colored Table
<table width="50%" bgcolor="#00CCFF">
<tr>
<td width="75%">This table is only 50% of the page width with a light blue background.</td>
<td width="25%">This cell is shorter than the first one</td>
</tr>
<tr>
<td>There is no border</td>
<td>This cell is also shorter.</td>
</tr>
</table>
Use bgcolor to set background color for the table, row, or cell.
🧾 Table with Headers
Example 5: Table with Header Row
<table width="100%" border="1">
<tr>
<th>This is a header row in the first column</th>
<th>This is a header in the second column</th>
</tr>
<tr>
<td>This is a table with a plain border</td>
<td>the full width of the page</td>
</tr>
<tr>
<td>with 2 rows</td>
<td>and 2 columns.</td>
</tr>
</table>
Use <th> for bold header cells.
🖼️ Tables with Images
You can add images and text to table cells. Here’s an example with three images and captions:
<table width="100%" border="0">
<tr>
<td align="center"><img src="./images/ban1.jpg" width="134" height="100" /></td>
<td align="center"><a href="http://followthearrow.gagb.co.uk" target="_blank"><img src="./images/ban2.jpg" width="134" height="100" /></a></td>
<td align="center"><img src="./images/ban3.jpg" width="134" height="100" /></td>
</tr>
<tr>
<td align="center">This is the first picture</td>
<td align="center">This is the second picture</td>
<td align="center">This is the third picture</td>
</tr>
</table>
📋 Lists Inside Tables
You can use bulleted or numbered lists inside table cells:
Bulleted List:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
Numbered List:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
📘 Definition Lists
Use definition lists to pair terms with descriptions:
<dl>
<dt>When you visit my cache you might want to do these caches too:</dt>
<dd>GC123456</dd>
<dd>GC123458</dd>
</dl>
