1. ECA 228 Internet/Intranet Design I Tables

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

3. ECA 228 Internet/Intranet Design I Basic HTML Tables cont … HTML does not explicitly create columns, only rows Date8AM2PM8PM 1 September$1.37 13 September$1.51$1.63$1.67 31 September$1.60$1.69 price of gasoline throughout the day

4. ECA 228 Internet/Intranet Design I Table Markup The following tags have corresponding closing tags which must be closed – opens an HTML table – begins a table row – creates a table cell – optional header cell tag – cell markup is centered and bold

5. ECA 228 Internet/Intranet Design I Table Markup Date 8AM 2PM 8PM

6. ECA 228 Internet/Intranet Design I Horizontal Sections To designate horizontal sections of a table: – implicitly created in HTML file explicit required in XML file – Use css to apply style to different sections of table

7. ECA 228 Internet/Intranet Design I attributes border = “number” cellpadding = “number” the space between the content of the cell and the border default value is 1

8. ECA 228 Internet/Intranet Design I attributes cont … cellspacing = “number” the space between table cells default value is 2

9. ECA 228 Internet/Intranet Design I attributes cont … align = “left | right | center” aligns the table in relation to the page default value is left

10. ECA 228 Internet/Intranet Design I attributes cont … bgcolor = “color | hexadecimal value” sets background color of table default value is transparent not fully supported by Netscape 4+

11. ECA 228 Internet/Intranet Design I attributes cont … background = “imageName.gif” inserts background image no default value not fully supported by Netscape 4+

12. ECA 228 Internet/Intranet Design I attributes cont … bordercolor = “color | hexadecimal value” sets border color of table default value is black not supported by Netscape 4+

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

14. ECA 228 Internet/Intranet Design I attributes cont … height = “number” sets height of table no default value not part of W3C recommendations

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

16. ECA 228 Internet/Intranet Design I attributes cont … frame example Date8AM2PM8PM 1 September$1.37 13 September$1.51$1.63$1.67 31 September$1.60$1.69 price of gasoline throughout the day

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

18. ECA 228 Internet/Intranet Design I attributes cont … rules example Date8AM2PM8PM 1 September$1.37 13 September$1.51$1.63$1.67 31 September$1.60$1.69 price of gasoline throughout the day

19. ECA 228 Internet/Intranet Design I attributes bgcolor = “color | hexadecimal value” sets background color of row default value is transparent

20. ECA 228 Internet/Intranet Design I attributes cont … align = “left | center | right” aligns content in relation to the table cell default value is left

21. ECA 228 Internet/Intranet Design I attributes cont … valign = “top | middle | bottom” aligns content vertically in relation to the cell default value is middle

22. ECA 228 Internet/Intranet Design I attributes cont … id = “name_of_id” class = “name_of_class” apply a stylesheet class or id to row

23. ECA 228 Internet/Intranet Design I attributes bgcolor = “color | hexadecimal value” sets background color of table cell default value is transparent

24. ECA 228 Internet/Intranet Design I attributes cont … align = “left | center | right” aligns content in relation to the table cell default value is left

25. ECA 228 Internet/Intranet Design I attributes cont … valign = “top | middle | bottom” aligns content vertically in relation to the cell default value is middle

26. ECA 228 Internet/Intranet Design I attributes cont … id = “name_of_id” class = “name_of_class” apply a stylesheet class or id to cell

27. ECA 228 Internet/Intranet Design I attributes cont … colspan = “number of columns to span” merge columns

28. ECA 228 Internet/Intranet Design I attributes cont … colspan blah blah blah blah

29. ECA 228 Internet/Intranet Design I attributes cont … rowspan = “number of rows to span” merge rows

30. ECA 228 Internet/Intranet Design I attributes cont … rowspan blah

31. ECA 228 Internet/Intranet Design I explicitly create groups of columns may use closing tag attributes include – span – width – id – class – align – valign

32. ECA 228 Internet/Intranet Design I cont … blah blah blah blah blah

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

34. ECA 228 Internet/Intranet Design I cont … blah blah blah blah blah blah blah