Beginner - HTML Tables

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr>, and each row is divided into data cells (with the <td> tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Code:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Save your work and then open it with an internet browser.

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.

To display a table with borders, you will have to use the border attribute:

Code:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Now save again and have a look again.

Headings in a Table

Headings in a table are defined with the <th> tag.

Code:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Save and look again and see what you have done.

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

Code:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

Note that the borders around the empty table cell are missing (Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible.

Code:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

Have a final look!

Hope this helps you guys out...