Download Tables presentation

Web Page Design
Using Tables
Here you see three examples of how
tables can be used to organize your
content. We call this “page layout”
or “design.” You can design a single
page’s layout, then duplicate it for
other pages. Hint: Do the links first!
Table Width
Percent of Browser Window (Fluid Width)
The left table’s width = 100%
The right table’s width = 50%
Table Width
Pixels (Fixed Width)
If you want your design to remain
the same from one viewer’s
browser to another, use pixels.
It is recommended that you use a
width of 600 pixels, as this will fit
all screens without causing the
user to scroll left and right.
If the user were to resize the
browser smaller than 600 pixels
wide, a scroll bar would appear at
the bottom of the window as you
see on the left.
Cell Padding
Cell padding increases
the space between the
text and the cell’s walls.
The number is in
pixels. A cell padding
of 5 is a good place to
start.
Cell Spacing
Cell spacing increases the
thickness of the cell walls.
The number is in pixels.
Table Border
The border property controls the
thickness of the table’s outer
border.
If you set the border = 0, the table
will not be visible on the Web.
This is a common practice to
control layout of a Web page. See
the next page for an example of
why you might want to use tables
to control layout of your
pages.
Layout Using Tables
Border = 3
Border = 0
(Invisible)
Tables and content identical except for the border property.
Table Background Color
Cell Background Color
To control the background of each cell right-click
inside the cell.
Table Align
You can align the whole table left, center or right in
the browser window.
Common Table Elements (Tags)
Below is a 9 cell table with 3 Headings & 6 data cells
(By default, table headings are rendered centered and bold)
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Some common Table styles
• Background color of table, table headings,
table rows. (alternate row coloring is
sometimes referred to as zebra striping)
• Font family and font color of the above
• Adding borders and padding
• Visually distinguish a hovered area of a
table.