ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables...
-
Upload
augustine-manning -
Category
Documents
-
view
216 -
download
1
Transcript of ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables...
ECA 228 Internet/Intranet Design I
Tables
ECA 228 Internet/Intranet Design I
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> opens an HTML table
– <tr> begins a table row
– <td> 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> </thead>– <tbody> </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”
cellpadding = “number”the space between the content of the cell and the border
default value is 1
< table border=“1” >
< table border=“1” cellpadding=“5” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
cellspacing = “number”
the space between table cells
default value is 2
< table border=“1” cellpadding=“5” cellspacing=“5” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
align = “left | right | center”
aligns the table in relation to the page
default value is left
< table border=“1” align=“center” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
bgcolor = “color | hexadecimal value”
sets background color of table
default value is transparent
not fully supported by Netscape 4+
< table border=“1” bgcolor=“#c0c0c0” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
background = “imageName.gif”
inserts background image
no default value
not fully supported by Netscape 4+
< table border=“1” background=“image/myImage.gif” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
bordercolor = “color | hexadecimal value”
sets border color of table
default value is black
not supported by Netscape 4+
< table border=“1” bordercolor=“red” >
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
no default value
not part of W3C recommendations
< table border=“1” height=“300” >
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
default value is bordernot fully supported – you may not get the results you expect
< table border=“1” frame=“vsides” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
frame example
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
< table border=“1” frame=“hsides” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
rules = “none | rows | cols | groups | all”
sets internal borders inside table
default value is all
not fully supported – you may not get the results you expect
< table border=“1” rules=“rows” >
ECA 228 Internet/Intranet Design I
<table> attributes cont …
rules example
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
< table border=“1” rules=“cols” >
ECA 228 Internet/Intranet Design I
<tr> attributes
bgcolor = “color | hexadecimal value”
sets background color of row
default value is transparent
< table border=“1”>
<tr bgcolor=‘red’>
ECA 228 Internet/Intranet Design I
<tr> attributes cont …
align = “left | center | right”
aligns content in relation to the table cell
default value is left
< table border=“1”>
<tr align=“center”>
ECA 228 Internet/Intranet Design I
<tr> attributes cont …
valign = “top | middle | bottom”
aligns content vertically in relation to the cell
default value is middle
< table border=“1”>
<tr valign=“right”>
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
default value is transparent
< table border=“1”>
<tr>
<td bgcolor=‘red’>
ECA 228 Internet/Intranet Design I
<td> attributes cont …
align = “left | center | right”
aligns content in relation to the table cell
default value is left
< table border=“1”>
<tr>
<td align=‘center’>
ECA 228 Internet/Intranet Design I
<td> attributes cont …
valign = “top | middle | bottom”
aligns content vertically in relation to the cell
default value is middle
< table border=“1”>
<tr>
<td valign = ‘top’>
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 blah
ECA 228 Internet/Intranet Design I
<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
blah
ECA 228 Internet/Intranet Design I
<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
blah
blah