ECA 228 Internet Design color. rods & cones electromagnetic radiation.
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables...
-
Upload
augustine-manning -
Category
Documents
-
view
214 -
download
1
Transcript of ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables...
![Page 1: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/1.jpg)
ECA 228 Internet/Intranet Design I
Tables
![Page 2: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/2.jpg)
ECA 228 Internet/Intranet Design I
Basic HTML Tables
Created as a way to present rows and clumns of data
![Page 3: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/5.jpg)
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>
![Page 6: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/7.jpg)
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” >
![Page 8: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/8.jpg)
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” >
![Page 9: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/9.jpg)
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” >
![Page 10: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/10.jpg)
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” >
![Page 11: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/11.jpg)
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” >
![Page 12: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/12.jpg)
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” >
![Page 13: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/13.jpg)
ECA 228 Internet/Intranet Design I
<table> attributes cont …
width = “number | %”
sets width of table
< table border=“1” width=“50%” >
![Page 14: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/14.jpg)
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” >
![Page 15: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/15.jpg)
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” >
![Page 16: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/16.jpg)
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” >
![Page 17: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/17.jpg)
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” >
![Page 18: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/18.jpg)
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” >
![Page 19: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/19.jpg)
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’>
![Page 20: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/20.jpg)
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”>
![Page 21: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/21.jpg)
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”>
![Page 22: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/22.jpg)
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”>
![Page 23: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/23.jpg)
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’>
![Page 24: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/24.jpg)
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’>
![Page 25: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/25.jpg)
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’>
![Page 26: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/26.jpg)
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’>
![Page 27: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/27.jpg)
ECA 228 Internet/Intranet Design I
<td> attributes cont …
colspan = “number of columns to span”
merge columns
< table border=“1”>
<tr>
<td colspan=‘2’>
![Page 28: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/28.jpg)
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
![Page 29: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/29.jpg)
ECA 228 Internet/Intranet Design I
<td> attributes cont …
rowspan = “number of rows to span”
merge rows
< table border=“1”>
<tr>
<td rowspan=‘2’>
![Page 30: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/30.jpg)
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
![Page 31: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/31.jpg)
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
![Page 32: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/32.jpg)
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
![Page 33: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/33.jpg)
ECA 228 Internet/Intranet Design I
<col>
further divide <colgroups> does not use closing</col> tag attributes include
– span– width– id– class– align– valign
![Page 34: 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.](https://reader034.fdocuments.us/reader034/viewer/2022042822/56649f165503460f94c2bc83/html5/thumbnails/34.jpg)
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