HTML Basics

Tables are very easy to use and will make your site look more appealing to the eye, while organizing your site's content. Almost every site uses tables in some form.

Here is the most basic table.

<table>- lets the computer know there is a table
<tr>- starts a new row
<td>- starts a new cell or box in the row

my content

</td>- end a cell in the row
</tr>- ends the row
</table>- lets the computer know the table has ended.

Here is a breakdown of some of the tags associated with the table tag. Of all of the tags below, you should get into the habit of always using the height and width tags, because they help your page load faster.

align- aligning an entire table
background- specifying a background image to the table
bgcolor- specifying a background color
border- specifying the width of the table border
bordercolor- specifying the color of the border
cellpadding- setting the space between a cell's contents and its border
cellspacing- setting the amount of space between cells
height- specifying the height of the table
width- specifying the width of the table

You can create as many cells or rows in a table as you'd like. You can even combine a table into another table.

Source	Result
<table border="1" bordercolor="#000000" cellpadding="5"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1 <table border="1" bordercolor="#000000" cellpadding="5"> <tr> <td>embeded table, cell 1</td> </tr> </table> </td> <td>row 2, cell 2</td> </tr> </table>	row 1, cell 1 row 1, cell 2 row 2, cell 1 embeded table, cell 1 row 2, cell 2

Want to take the double lined borders away? Just add style="border-collapse: collapse" to the table command.

Source	Result
<table border="1" bordercolor="#000000" cellpadding="5" style="border-collapse: collapse"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1 <table border="1" bordercolor="#000000" cellpadding="5" style="border-collapse: collapse"> <tr> <td>embeded table, cell 1</td> </tr> </table> </td> <td>row 2, cell 2</td> </tr> </table>	row 1, cell 1 row 1, cell 2 row 2, cell 1 embeded table, cell 1 row 2, cell 2