TABLES

Home Page     About HTML     Images and Links     Lists     Colors     Layout

Table Tags:

The table tag begins and ends with:
< table >   < /table >
To create new rows you have:
< tr >   < /tr >
To create new cells the tag is:
< td >   < /td >   td stands for table data

Example:
1 2
3 4
5 6

The html code for this looks like:
< table border = "2" width = "50%" cellpadding = "20" cellspacing = "20" >
<tr>   <td> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

With out the border tag in the table tag the table wouldn't have lines and would look like this:
1 2
3 4
5 6

The table width tag can be done in pixels or in percent. When you write in the percent it is talking about the percent of the page the table takes up. It looks like this:
1 2
3 4
5 6

The html code for this looks like:
< table border = "2" width = "50%" >
<tr>   <td> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

The cell padding tag creates "padding" around the cell content, and it is done in pixels. It looks like this:
1 2
3 4
5 6

The html code for this looks like:
< table border = "2" cellpadding = "20" >
<tr>   <td> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

The cell spacing tag creates space between each cell. It looks like this:
1 2
3 4
5 6

The html code for this looks like:
< table border = "2" cellspacing = "20" >
<tr>   <td> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

Merging Cells Horizontally and Vertically:

Merging cells is used to create a lable or just a larger cell. Colspan will merge horizontally and rowspan will merge vertically. You put the tags into the cell tag(td). They look like this:
< td colspan = "3" >     < td rowspan = "3" >
The number is telling how many cells you want it to combine.

Example of Colspan(combining horizontally):

1
2 3
4 5

Example of Rowspan(combining vertically):
1 2 3
4 5
6 7

Table Backgrounds

The bgcolor tag can be put in the table tag, the tr(row) tag or the td (cell) tag.
This is how it looks in the table tag:

A B
C D
E F

The html code for this looks like:
< table bgcolor= "dcf748" border = "2" width = "50%" cellpadding = "20" cellspacing = "20" >
<tr>   <td> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

This is how it looks in the tr(row) tag:
A B
C D
E F

The html code for this looks like:
< table border = "2" width = "50%" cellpadding = "20" cellspacing = "20" >
<tr bgcolor= "dcf748">   <td> 1 </td>   <td> 2 </td>   </tr>
<tr bgcolor= "dcf748">   <td> 3 </td>   <td> 4 </td>   </tr>
<tr bgcolor= "dcf748">   <td> 5 </td>   <td> 6 </td>   </tr>
</table>

This is how it looks in the td(cell) tag:
A B
C D
E F

The html code for this looks like:
< table bgcolor= "dcf748" border = "2" width = "50%" cellpadding = "20" cellspacing = "20" >
<tr>   <td bgcolor= "dcf748"> 1 </td>   <td> 2 </td>   </tr>
<tr>   <td bgcolor= "dcf748"> 3 </td>   <td> 4 </td>   </tr>
<tr>   <td bgcolor= "dcf748"> 5 </td>   <td> 6 </td>   </tr>
</table>

You can also use tileable images to create a background image for the table.
Blair Blair
Blair Blair
Blair Blair

The html code looks like this:
< table border = "2" width = "50%" background = "foldername/filename" cellpadding = "20" >
<tr>   <td > Blair </td>   <td> Blair </td>   </tr>
<tr>   <td > Blair </td>   <td> Blair </td>   </tr>
<tr>   <td > Blair </td>   <td> Blair </td>   </tr>
</table>

You can also put different pictures in each of the cells. Ex:
My Colleges
Aceptances: Purdue CU Boulder Univeristy of Delaware Loyola Marymount University of San Diego
.

Blair
3/23/10