ECA 228 Internet/Intranet
Design I
Tables
Basic HTML Tables

Created as a way to present rows and clumns
of data
ECA 228 Internet/Intranet Design I
Basic HTML Tables

cont …
HTML does not explicitly create columns, only
rows
Date
8AM
2PM
8PM
1 September
$1.37
$1.37
$1.37
13 September
$1.51
$1.63
$1.67
31 September
$1.60
$1.69
$1.69
price of gasoline throughout the day
ECA 228 Internet/Intranet Design I
Table Markup
The following tags have corresponding closing tags
which must be closed

–
<table>

–
<tr>

–
begins a table row
<td>

–
opens an HTML table
creates a table cell
<th>

optional header cell tag – cell markup is centered and bold
ECA 228 Internet/Intranet Design I
Table Markup
<table>
<tr> <!-- creates a table row -->
<td> Date </td> <!-- creates a table cell -->
<td> 8AM </td> <!-- another table cell -->
<td> 2PM </td>
<td> 8PM </td>
</tr>
</table>
ECA 228 Internet/Intranet Design I
Horizontal Sections

To designate horizontal sections of a table:
–
–
<thead>
<tbody>


–

</thead>
</tbody>
implicitly created in HTML file
explicit <tbody> required in XML file
<tfoot>
</tfoot>
Use css to apply style to different sections of
table
ECA 228 Internet/Intranet Design I
<table> attributes
border = “number”
< table border=“1” >
cellpadding = “number”
the space between the content of the cell and
the border
< table border=“1” cellpadding=“5” >
default value is 1
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
cellspacing = “number”
the space between table cells
< table border=“1” cellpadding=“5” cellspacing=“5” >
default value is 2
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
align = “left | right | center”
aligns the table in relation to the page
< table border=“1” align=“center” >
default value is left
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
bgcolor = “color | hexadecimal value”
sets background color of table
< table border=“1” bgcolor=“#c0c0c0” >
default value is transparent
not fully supported by Netscape 4+
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
background = “imageName.gif”
inserts background image
< table border=“1” background=“image/myImage.gif” >
no default value
not fully supported by Netscape 4+
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
bordercolor = “color | hexadecimal value”
sets border color of table
< table border=“1” bordercolor=“red” >
default value is black
not supported by Netscape 4+
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
width = “number | %”
sets width of table
< table border=“1” width=“50%” >
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
height = “number”
sets height of table
< table border=“1” height=“300” >
no default value
not part of W3C recommendations
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
frame = “void | above | below | hsides | vsides |
rhs lhs | box or border”
sets external borders around table
< table border=“1” frame=“vsides” >
default value is border
not fully supported – you may not get the
results you expect
ECA 228 Internet/Intranet Design I
<table> attributes

cont …
frame example
< table border=“1” frame=“hsides” >
Date
8AM
2PM
8PM
1 September
$1.37
$1.37
$1.37
13 September
$1.51
$1.63
$1.67
31 September
$1.60
$1.69
$1.69
price of gasoline throughout the day
ECA 228 Internet/Intranet Design I
<table> attributes
cont …
rules = “none | rows | cols | groups | all”
sets internal borders inside table
< table border=“1” rules=“rows” >
default value is all
not fully supported – you may not get the
results you expect
ECA 228 Internet/Intranet Design I
<table> attributes

cont …
rules example
< table border=“1” rules=“cols” >
Date
8AM
2PM
8PM
1 September
$1.37
$1.37
$1.37
13 September
$1.51
$1.63
$1.67
31 September
$1.60
$1.69
$1.69
price of gasoline throughout the day
ECA 228 Internet/Intranet Design I
<tr> attributes
bgcolor = “color | hexadecimal value”
sets background color of row
< table border=“1”>
<tr bgcolor=‘red’>
default value is transparent
ECA 228 Internet/Intranet Design I
<tr> attributes
cont …
align = “left | center | right”
aligns content in relation to the table cell
< table border=“1”>
<tr align=“center”>
default value is left
ECA 228 Internet/Intranet Design I
<tr> attributes
cont …
valign = “top | middle | bottom”
aligns content vertically in relation to the cell
< table border=“1”>
<tr valign=“right”>
default value is middle
ECA 228 Internet/Intranet Design I
<tr> attributes
cont …
id = “name_of_id”
class = “name_of_class”
apply a stylesheet class or id to row
< table border=“1”>
<tr class=“red_border”>
ECA 228 Internet/Intranet Design I
<td> attributes
bgcolor = “color | hexadecimal value”
sets background color of table cell
< table border=“1”>
<tr>
<td bgcolor=‘red’>
default value is transparent
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
align = “left | center | right”
aligns content in relation to the table cell
< table border=“1”>
<tr>
<td align=‘center’>
default value is left
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
valign = “top | middle | bottom”
aligns content vertically in relation to the cell
< table border=“1”>
<tr>
<td valign = ‘top’>
default value is middle
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
id = “name_of_id”
class = “name_of_class”
apply a stylesheet class or id to cell
< table border=“1”>
<tr>
<td class=‘red_border’>
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
colspan = “number of columns to span”
merge columns
< table border=“1”>
<tr>
<td colspan=‘2’>
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
colspan
< table border=“1”>
<tr>
<td colspan=‘2’> blah </td>
</tr>
<tr>
<td> blah </td>
<td> blah </td>
</tr>
</table>
blah
blah
ECA 228 Internet/Intranet Design I
blah
<td> attributes
cont …
rowspan = “number of rows to span”
merge rows
< table border=“1”>
<tr>
<td rowspan=‘2’>
ECA 228 Internet/Intranet Design I
<td> attributes
cont …
rowspan
< table border=“1”>
<tr>
<td rowspan=‘2’> blah </td>
<td> blah </td>
</tr>
<tr>
<td> blah </td>
</tr>
</table>
blah
blah
ECA 228 Internet/Intranet Design I
blah
<colgroup>



explicitly create groups of columns
may use closing</colgroup> tag
attributes include
–
–
–
–
–
–
span
width
id
class
align
valign
ECA 228 Internet/Intranet Design I
<colgroup>
cont …
< table border=“1”>
<colgroup bgcolor=‘pink’ />
<colgroup bgcolor=‘yellow’ />
<tr>
<td> blah </td>
<td> blah </td>
</tr> <tr>
<td> blah </td>
<td> blah </td>
</tr>
</table>
blah
blah
blah
blah
ECA 228 Internet/Intranet Design I
<col>



further divide <colgroups>
does not use closing</col> tag
attributes include
–
–
–
–
–
–
span
width
id
class
align
valign
ECA 228 Internet/Intranet Design I
<col>
cont …
< table border=“1”>
<colgroup bgcolor=‘pink’ span=‘2’>
<col valign=‘top’ />
<col valign=‘bottom’ />
</colgroup>
<colgroup bgcolor=‘yellow’ />
<tr>
<td>blah</td><td>blah</td>
<td>blah</td>
</tr> <tr>
<td>blah</td><td>blah</td>
<td>blah</td> </tr>
</table>
blah
blah
blah
blah
ECA 228 Internet/Intranet Design I
blah
blah