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.