ECA 228 InternetIntranet Design I Tables Basic HTML
ECA 228 Internet/Intranet Design I Tables
Basic HTML Tables l Created as a way to present rows and clumns of data ECA 228 Internet/Intranet Design I
Basic HTML Tables l cont … HTML does not explicitly create columns, only rows Date 8 AM 2 PM 8 PM 1 September $1. 37 13 September $1. 51 $1. 63 $1. 67 31 September $1. 60 $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 l – <table> l – <tr> l – begins a table row <td> l – opens an HTML table creates a table cell <th> l 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> 8 AM </td> <!-- another table cell --> <td> 2 PM </td> <td> 8 PM </td> </tr> </table> ECA 228 Internet/Intranet Design I
Horizontal Sections l To designate horizontal sections of a table: – – <thead> <tbody> l l – l </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=“#c 0 c 0 c 0” > default value is transparent not fully supported by Netscape 4+ ECA 228 Internet/Intranet Design I
<table> attributes cont … background = “image. Name. gif” inserts background image < table border=“ 1” background=“image/my. Image. 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 W 3 C 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 l cont … frame example < table border=“ 1” frame=“hsides” > Date 8 AM 2 PM 8 PM 1 September $1. 37 13 September $1. 51 $1. 63 $1. 67 31 September $1. 60 $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 l cont … rules example < table border=“ 1” rules=“cols” > Date 8 AM 2 PM 8 PM 1 September $1. 37 13 September $1. 51 $1. 63 $1. 67 31 September $1. 60 $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> <td> blah </td> </tr> </table> 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> </table> blah ECA 228 Internet/Intranet Design I blah
<colgroup> l l l 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> </tr> </table> blah ECA 228 Internet/Intranet Design I
<col> l l l 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> </tr> </table> blah ECA 228 Internet/Intranet Design I blah
- Slides: 34