HTML Table samples
|
Command | Description |
| <table> | begin Table |
| </table> | end Table |
| <tr> | begin Table Row |
| </tr> | end Table Row |
| <td> | begin Table Data (Column or Cell) |
| </td> | end Table Data |
All your HTML & Content goes between the <td> and </td>, never between anything else.
- Always close your <table>, <tr>, <td> with </table>, </tr>, </td>, respectively.
- Indenting of your HTML is optional, but highly recommended for readability.
- There's no consensus on how to indent, so use your best judgment.
- A variety of layouts are used in the following tables.
- The top few tables are spread out (kind of snake-like).
- The bottom tables are a little "tighter."
|
Table with 1 row and 1 column
| ||||
| Source Code (HTML) | How it appears | |||
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
|
| |||
|
Table with 1 row and 1 column - border
| ||||
| Source Code (HTML) | How it appears | |||
<table border=3>
<tr>
<td>
Content
</td>
</tr>
</table>
|
| |||
|
Table with 1 row and 2 columns
| ||||
| Source Code (HTML) | How it appears | |||
<table border=3>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
|
| |||
|
Table with 2 rows and 1 column
| ||||
| Source Code (HTML) | How it appears | |||
<table border=3>
<tr>
<td>
Content 1
</td>
</tr>
<tr>
<td>
Content 2
</td>
</tr>
</table>
|
| |||
|
Table with 2 rows and 2 columns
| |||||
| Source Code (HTML) | How it appears | ||||
<table border=3>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
<tr>
<td>
Content 3
</td>
<td>
Content 4
</td>
</tr>
</table>
|
| ||||
|
Table with 2 rows and 3 columns
| |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=3>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
<td>
Content 3
</td>
</tr>
<tr>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
</tr>
</table>
|
| ||||||
|
Table with 3 rows and 2 columns
| |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=3>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
<tr>
<td>
Content 3
</td>
<td>
Content 4
</td>
</tr>
<tr>
<td>
Content 5
</td>
<td>
Content 6
</td>
</tr>
</table>
|
| ||||||
|
Table with 2 rows and 2 columns - cellspacing and bgcolor | |||||
| Source Code (HTML) | How it appears | ||||
<table border=3 cellspacing=10>
<tr>
<td bgcolor="#ccccff">
Content 1
</td><td bgcolor="#ccccff">
Content 2
</td>
</tr><tr>
<td bgcolor="#ccccff">
Content 3
</td><td bgcolor="#ccccff">
Content 4
</td>
</tr>
</table>
|
| ||||
|
Table with 2 rows and 2 columns - cellpadding and bgcolor | |||||
| Source Code (HTML) | How it appears | ||||
<table border=3 cellpadding=10>
<tr>
<td bgcolor="#ccccff">
Content 1
</td><td bgcolor="#ccccff">
Content 2
</td>
</tr><tr>
<td bgcolor="#ccccff">
Content 3
</td><td bgcolor="#ccccff">
Content 4
</td>
</tr>
</table>
|
| ||||
|
Table with 3 rows and 2 columns - colspan 1st row spans both columns | |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=3 cellpadding=5>
<tr>
<td colspan=2>
Content 1
</td>
</tr><tr>
<td>
Content 3
</td><td>
Content 4
</td>
</tr><tr>
<td>
Content 5
</td><td>
Content 6
</td>
</tr>
</table>
|
| ||||||
|
Table with 3 rows and 2 columns - align 1st row spans both columns | |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=3 cellpadding=5>
<tr>
<td colspan=2 align=center>
Content 1
</td>
</tr><tr>
<td>
Content 3
</td><td>
Content 4
</td>
</tr><tr>
<td>
Content 5
</td><td>
Content 6
</td>
</tr>
</table>
|
| ||||||
|
Table with 3 rows and 2 columns - rowspan 1st column spans all 3 rows | |||||
| Source Code (HTML) | How it appears | ||||
<table border=3 cellpadding=5>
<tr>
<td rowspan=3>
Content 1
</td><td>
Content 2
</td>
</tr><tr>
<td>
Content 3
</td>
</tr>
<tr>
<td>
Content 4
</td>
</tr>
</table>
|
| ||||
|
Table with 3 rows and 2 columns - valign 1st column spans all 3 rows | |||||
| Source Code (HTML) | How it appears | ||||
<table border=3 cellpadding=5>
<tr>
<td rowspan=3 valign=top>
Content 1
</td><td>
Content 2
</td>
</tr><tr>
<td>
Content 3
</td>
</tr>
<tr>
<td>
Content 4
</td>
</tr>
</table>
|
| ||||
|
Nested Tables Table 1 = 1 row, 2 columns Table 2 (Nested) = 2 rows, 2 columns | |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=3 cellpadding=10>
<tr>
<td valign=top>
Content 1
</td><td>
Content 2<p>
<table border=1>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr><tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table><p>
Content 7
</td>
</tr>
</table>
|
| ||||||
|
Nested Tables - Variation Table 1 = 1 row, 2 columns, bgcolor, no border Table 2 = 2 rows, 2 columns, nested | |||||||
| Source Code (HTML) | How it appears | ||||||
<table border=0 cellpadding=10 cellspacing=0>
<tr>
<td align=center valign=top bgcolor="#ccccff">
Content 1a<br>
1b
</td><td>
<div align="center">Content 2a</div><p>
Content 2b<br>
Content 2c<p>
<table border=1 cellpadding=5>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr><tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table><p>
Content 7
</td>
</tr>
</table>
|
| ||||||
Sometimes tables are difficult to align.