Home


  Tables !!!  

 

This lesson covers the basics of tables and how to make them in html.

Tables are made up of cells.
This table has borders.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

This table doesn't have borders.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

Cells are arranged in rows.
This example has one row of cells. (the above examples have 4 rows of cells)
cell cell cell cell

Cells can be viewed as if in columns.
This example has one column of cells. (the above examples have 4 columns of cells)
cell
cell
cell
cell

Tables can contain different background colors in the cells.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

Tables can have cells that "span" 2 or more columns.
cell cell cell
cell cell cell cell
cell cell cell
cell cell cell cell

They can also have cells that span two or more rows.
cell cell cell cell
cell cell cell
cell cell cell
cell cell cell

Tables can fill the screen.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

You can choose to line up the text to left, center, or right.(The default is left)
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell


Let's take a look at how to create these tables.
Starting with a table with just one cell. The table requires the <table> </table> tags around the entire table. < >


  Tables !!!  

Nested inside of the table are rows.<tr></tr> This table has only one row.
Nested inside of the rows are cells using the table data tags. This table has only one cell so only one td tag.

<table border=1 bordercolor=blue cellpadding=1 bgcolor=white>
<tr>
<td>
<br>
<h1>  Tables !!!  </h1>
</td>
</tr>
</table>


Tables are made up of cells.
This table has borders.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>

This table doesn't have borders.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

<table cellpadding=1 bgcolor=white>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>


Cells are arranged in rows.
This example has one row of cells. (the above examples have 4 rows of cells)
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>

Cells can be viewed as if in columns.
This example has one column of cells. (the above examples have 4 columns of cells)
cell
cell
cell
cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</table>


Tables can contain different background colors in the cells.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td bgcolor=yellow>cell </td>
<td bgcolor=red>cell </td>
<td bgcolor=blue>cell </td>
<td bgcolor=gray>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td bgcolor=green>cell </td>
<td>cell </td>
<td bgcolor=purple>cell </td>
<td>cell </td>
</tr>
<tr>
<td bgcolor=orange>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>


Tables can have cells that "span" 2 or more columns.
cell cell cell
cell cell cell cell
cell cell cell
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td colspan=2>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td colspan=1>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td colspan=2>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td colspan=1>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>

They can also have cells that span two or more rows.
cell cell cell cell
cell cell cell
cell cell cell
cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white>
<tr>
<td rowspan=2>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td rowspan=3>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>


Tables can fill the screen.
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white width=100%>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>


You can choose to line up the text to left, center, or right.(The default is left)
cell cell cell cell
cell cell cell cell
cell cell cell cell
cell cell cell cell

<table border=1 bordercolor=black cellpadding=1 bgcolor=white width=100%>
<tr>
<td align=left>cell </td>
<td align=left>cell </td>
<td align=left>cell </td>
<td align=left>cell </td>
</tr>
<tr>
<td align=center>cell </td>
<td align=center>cell </td>
<td align=center>cell </td>
<td align=center>cell </td>
</tr>
<tr>
<td align=right>cell </td>
<td align=right>cell </td>
<td align=right>cell </td>
<td align=right>cell </td>
</tr>
<tr>
<td>cell </td>
<td>cell </td>
<td>cell </td>
<td>cell </td>
</tr>
</table>