Tables

Web Design
How tables are used
 For data display
 For better text alignment
 For overall page structure
 For holding together a multipart (sliced)
image

 Tables can be nested

Basic table structure
column column column column
row cell cell cell cell
row cell cell cell cell
row cell cell cell cell

<table>

<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>

</table>
Table

table.html
Table border
 Makes the border appear around cells:
 <table border=“1”>
 Or not appear:
 <table border=“0”>
Spanning Cells
 Column spans
 <td colspan=“2”> . . . </td>

 Row spans
 <td rowspan=“2”> . . . </td>
Spanning Cells
<td rowspan=“2”> <td colspan=“4”>

table_spans.html
Complex Designs
<td colspan=“4”>

<td colspan=“2”> <td> <td>

<td> <td> <td> <td

rowspan=“3”>
<td colspan=“2”> <td>

<td> <td> <td>

<td colspan=“2”> <td> <td>

<td> <td> <td> <td>

<td colspan=“3”> <td>

Table width and height
 Can be defined in pixels or in %
 <table width=“800”>
 <table width=“70%”>
cellpadding and cellspacing
 cellpading:
 Amount of space held between the contents of
the cell and the cell border
 <table cellpadding=“7”>

 cellspacing:
 Amount of space held between cells.
 <table cellspacing=“15”>
Table background
 Can be set using:
 background – in order to set an image as
background
 bgcolor – in order to set a solid color as
background
Controlling individual cells
 width and height (again in pixels or %)
 <td width=“200” height=“50”>
 Alignment:
 align – can be left, right, or center
 valign – can be top, center, or bottom
 Background:
 background – to set an image
 bgcolor – to set a solid color
Using tables for alignment

table_align.html
Page structure

table_size.html
Activity