Tutorials > HTML > Tables
Create tables using HTML to organize your site neatly.
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 tablebackground- 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.
<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
|
row 2, cell 2 |
Want to take the double lined borders away? Just add style="border-collapse: collapse" to the table command.
<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
|
row 2, cell 2 |
