Scribd
Upload
10 views14 pages

Tables

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views14 pages

Tables

Uploaded by

beer.butterchicken
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Tables

• Introduction to Tables
• Table Format
• Table Captions
• Table Example
• Excercise
Introduction to Tables
Why Tables?
• Organized layout of information
• Allows good organization of
webpage
• Can be used to replace static
frames
Table Format

<TABLE options>
<TR options>
<TH options> … </TH>
<TD options> …</TD>
</TR>
</TABLE>
<table> options

border = [0/1]
cellpadding = [0..]
cellspacing = [0..]
width = [0..100%] / x (x is a pixel value)
Examples
<table border="1">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

If you add the following :

<table border="1" cellpadding="10">


Examples

By contrast the cellspacing attribute


sets the space between the
cells. Setting the cell spacing to
10:

<table border="1" cellpadding="10"


cellspacing="10">

has the effect:


Examples

Table Width
You can set the width of the table using the width attribute. The value is either the
width in pixels or a percentage value representing the percentage of the
space available between the left and right margins. For instance to set the
width to 80% of the margins:

<table border="1" cellpadding="10" width="80%">


<tr> options (table row)

align = [left|center|right]
valign = [top|middle|bottom]
Examples
You can change alignment using the align attribute, which can be added to
each cell or to the row (tr element). It is used with the values "left", "center" or
"right":
<table border="1" cellpadding="10" width="80%">
<tr align="center"> <th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>
<th> options (table
header)

rowspan = [0..]
colspan = [0..]
bgcolor = [rgb colour code|colour]
Examples
<table border="1" cellpadding="10" width="80%">
<tr align="center">
<th rowspan="2">Year</th><th colspan="3">Sales</th></tr>
<tr align="center"><th>North</th><th>South</th><th>Total</th></tr>
<tr align="center">
<td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td>
</tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td>
</tr>
</table>
Example
<td> options (table data)

width = [0..100%]
bgcolor = [rgb colour code|colour]
align = [left|center|right]
valign = [top|middle|bottom]
Example
<table border=“1" cellspacing=“10" cellpadding="10">
<tr> <th bgcolor="#CCCC99">Year</th>
<th bgcolor="#CCCC99">Sales</th>
</tr>
<tr>
<td bgcolor="#FFFF66">2000</td>
<td bgcolor="#FFFF66">$18M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2001</td>
<td bgcolor="#FFFF66">$25M</td>
</tr>
<tr>
<td bgcolor="#FFFF66">2002</td>
<td bgcolor="#FFFF66">$36M</td>
</tr>
</table>

You might also like