A table looks like a spreadsheet
Tables are made up of cells, laid out in rows
and columns, similar to a chess board
A cell can contain data, text or images
Cells can be combined horizontally or
vertically
Tables are created with the double-sided table
tag:
<table>….</table>
Tables require dimensions
You can use either percentages or pixel dimensions
<table width="100%" border="1">
<table width="640" border="1">
Borders can be displayed or made invisible
Borders can have various thicknesses
If you indicate the size based on percentage:
The table will resize as the window is resized
If you indicate the size based on pixels:
The table will not resize as the window is resized,
but there will be more control of the final look at a
specific screen resolution
<tr>…</tr> creates a table row
<td>…</td> creates the actual cell, and stands
for table data
<th>…</th> creates a table header which is
bold and centered.
<table>
<tr>
<th width="183">First Name</th>
<th width="183">Last Name</th>
<th width="252">Email Address</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Colspan combines selected cells in a row into
one big row
<tr>
<td colspan="3"> </td>
</tr>
Rowspan combines the selected cells in a row
into one big column
<tr width="183" rowspan="2">First
Name</tr>
If you create a table with 3 rows and 3 columns,
It looks like a tic-tac-toe board
<table width="314" height="291" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Nested tables are when we build tables inside
of tables
Nesting tables is a common task in HTML and
has many purposes
To nest a table, you literally take the entire
code used to build a table and place it between
the <td></td> tags which create the cells of the
outer table
<td>
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
