1 / 34

ECA 228 Internet/Intranet Design I

ECA 228 Internet/Intranet Design I. Tables. Basic HTML Tables. Created as a way to present rows and clumns of data. Basic HTML Tables cont …. HTML does not explicitly create columns, only rows. price of gasoline throughout the day. Table Markup.

luella
Download Presentation

ECA 228 Internet/Intranet Design I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 228 Internet/Intranet Design I Tables

  2. Basic HTML Tables • Created as a way to present rows and clumns of data ECA 228 Internet/Intranet Design I

  3. Basic HTML Tables cont … • HTML does not explicitly create columns, only rows price of gasoline throughout the day ECA 228 Internet/Intranet Design I

  4. 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

  5. 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

  6. 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

  7. <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

  8. <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

  9. <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

  10. <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

  11. <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

  12. <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

  13. <table> attributes cont … width = “number | %” sets width of table < table border=“1” width=“50%” > ECA 228 Internet/Intranet Design I

  14. <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

  15. <table> attributes cont … frame = “void | above | below | hsides | vsides | rhs lhs | box or border” sets external borders around table default value is border not fully supported – you may not get the results you expect < table border=“1” frame=“vsides” > ECA 228 Internet/Intranet Design I

  16. <table> attributes cont … • frame example < table border=“1” frame=“hsides” > price of gasoline throughout the day ECA 228 Internet/Intranet Design I

  17. <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

  18. <table> attributes cont … • rules example < table border=“1” rules=“cols” > price of gasoline throughout the day ECA 228 Internet/Intranet Design I

  19. <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

  20. <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

  21. <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

  22. <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

  23. <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

  24. <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

  25. <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

  26. <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

  27. <td> attributes cont … colspan = “number of columns to span” merge columns < table border=“1”> <tr> <td colspan=‘2’> ECA 228 Internet/Intranet Design I

  28. <td> attributes cont … colspan < table border=“1”> <tr> <td colspan=‘2’> blah </td> </tr> <tr> <td> blah </td> <td> blah </td> </tr></table> ECA 228 Internet/Intranet Design I

  29. <td> attributes cont … rowspan = “number of rows to span” merge rows < table border=“1”> <tr> <td rowspan=‘2’> ECA 228 Internet/Intranet Design I

  30. <td> attributes cont … rowspan < table border=“1”> <tr> <td rowspan=‘2’> blah </td> <td> blah </td> </tr> <tr> <td> blah </td> </tr></table> ECA 228 Internet/Intranet Design I

  31. <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

  32. <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> ECA 228 Internet/Intranet Design I

  33. <col> • further divide <colgroups> • does not use closing</col> tag • attributes include • span • width • id • class • align • valign ECA 228 Internet/Intranet Design I

  34. <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> ECA 228 Internet/Intranet Design I

More Related