A html table uses the <table> </table> tags.
A table is divided into rows using the <tr> tag and the table data cells <td> tag
ALl of which require closing tags </tr> </td>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>row 2, cell 2</td>
</tr>
</table>
|
Example 1
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
To add heading you add a <th> </th>
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr>row 2, cell 2</td>
</tr>
</table>
|
Example 2
| Heading 1 |
Heading 2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Tables with no content in a cell just replace a Empty Space symbles
Notice the difference ?
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 3
| Heading 1 |
Heading 2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
Example 4
| Heading 1 |
Heading 2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
Tables with no border
<table border="0">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 5
| Heading 1 |
Heading 2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Tables with a caption
<table border="1">
<caption>A Caption</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 6
A Caption
| Heading 1 |
Heading 2 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Cell that spans two columns
<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 7
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Add more white space between the cell content and its borders using Cell Padding
<table border="1" cellpadding="5">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 8
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
To increase the distance between the cells using Cell Spacing
<table border="1" cellspacing="5">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 9
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Add color to background of table
<table border="1" bgcolor="green">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 10
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Add color to background of Cell
<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td bgcolor="red">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 11
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
Add image to background of Cell
<table border="1">
<caption>A Caption</caption>
<tr>
<th COLSPAN="2">Heading 1</th>
</tr>
<tr>
<td bgcolor="button1.gif">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<tdr> </td>
</tr>
</table>
|
Example 12
A Caption
| Heading 1 |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
