February 12, 2008

1. Week 4: Lists and Tables February 12, 2008 Margaret Kipp margaret.kipp@gmail.com http://myweb.liu.edu/~mkipp/

2. Colour Charts and Required Tags • Appendix A: XHTML Elements and Attributes • lists elements and attributes • items marked with a D are deprecated and cannot be used with a strict DTD • items marked with an F are for use with frames and also cannot be used with strict • Appendix B: CSS Properties and Values

3. Colour Charts and Required Tags 2 • Appendix D: SGML Characters • e.g. é &   • Appendix E: Hexadecimal Values • How to create colour values from basic hexadecimal values if you find the colour charts included are too limiting

4. List Elements • List elements provide structure to a list of items • There are 3 major list types: • <ol>: ordered list • <ul>: unordered list • <dl>: definition list • Each list type has child elements • All are block level elements and take the core attributes and the i18n attributes.

5. Ordered and Unorded Lists • <ol>: an ordered list • <ul>: an unordered list • each list element is enclosed by <li> tags • <ol> • <li>first element</li> • <li>second element</li> • </ol> • unordered lists work the same way • it can be helpful to indent list elements

6. Example: Ordered List The 5 largest cities in Canada are: <ol> <li>Toronto</li> <li>Montr&eacute;al</li> <li>Vancouver</li> <li>Ottawa</li> <li>Calgary</li> </ol>

7. Example: Unordered List The ingredients for pasta e fagioli are: <ul> <li>olive oil</li> <li>onion</li> <li>garlic</li> <li>stewed tomatoes</li> <li>white kidney beans</li> <li>spices</li> <li>pasta</li> </ul>

8. List Attributes • start= sets the start value for an ordered list • e.g. <ol start="2"> • value= sets the exact value of an ordered element • e.g. <li value="5">

9. List Attributes 2 • class= the class attribute can be used to set formatting for a list • e.g. <li class="new">something</li> • because lists are block level, the <span> tag can be used inside the list tags to set styles too • e.g. <li><span class="new">something</span></li>

10. Lists can be nested, but the nested list must be within an <li></li> pair Nested Lists • <ul> • <li>Coffee</li> • <li>Tea • <ul> • <li>Black tea</li> • <li>Green tea</li> • </ul> • </li> • <li>Milk</li> • </ul>

11. Definition Lists • <dl>: definition list • definition lists have two child elements: • <dd> and <dt> • <dd>: definition term • <dt>: definition description • a definition term can have multiple descriptions and you can have multiple terms with a single description

12. Example: Definition List A few definitions:<dl> <dt>Descriptive data</dt> <dd>data derived from the item</dd> <dt>Element (or metadata tag)</dt> <dd>metadata field which contains content from the descriptive data</dd> <dt>Access point</dd> <dd>term(s) used for retrieval of a surrogate record</dt> </dl>

13. Tables • HTML and XHTML have a <table> element that allows contents to be aligned in a tabular format • Tables may have a caption and/or a summary. • Both describe the table. • The latter is longer than the former. • Table rows are aligned vertically. • Table columns are aligned horizontally. • Cells contain a table's contents

14. Table Structure • A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. • Column 1 Column 2 Column 3 • Row 1 • Row 2 • Row 3

15. Table Issues • Tables are often used to create a visual layout, but this is better done with style sheets since it is not accessible. • Tables should be small enough to view on the screen without scrolling. • Tables automatically adjust to fit the screen so there is a limit to how much control can be exerted over table layout

16. The <table> Element • the <table> element encloses a table • It takes the core and i18n attributes • summary= attribute provides a summary of the table's purpose and structure for browsers rendering to non-visual media such as speech and Braille

17. Attributes of <table> • width= attribute specifies the desired width of the entire table, it can be an absolute value or a percentage of the width of the page • border= sets the thickness of the border around the table in pixels • e.g. <table border="10" width="200"> • <table border="10" width="60%">

18. Attributes of <table> 2 • cellpadding= number of pixels that should appear between the contents of a cell and its border • cellspacing= number of pixels that should appear between one cell border and the next

19. Attributes of <table>: frame= • specifies which sides of a tables' frame will be visible • Possible values: • "void" no sides (default)‏ • "above" the top side only • "below" the bottom side only • "hsides" the top and bottom sides only • "vsides" the right and left sides only • "lhs" the left-hand side only • "rhs" the right-hand side only • "box" all four sides • "border" all four sides

20. Attributes of <table>: rules= • specifies where rules will appear between cells within a table • Possible values • "none" no rules (default)‏ • "groups" rules between row groups only • "rows" rules between rows only • "cols" rules between columns only • "all" rules between all rows and columns

21. Deprecated <table> Attributes • align= for aligning the table with respect to the window, values are left, center and right • bgcolor= for changing the background colour of the table

22. Children of <table>: <caption> • The <caption> tag provides a caption for the table. • It takes the core and i18n attributes. • The <caption> tag must be placed immediately after the start <table> tag. • Tables can only have one <caption>

23. Children of <table>: <tr> • the table row element <tr> identifies a row in a table • table rows can have multiple children, all table cell elements • there are two types of cell elements: <td> and <th> • <th> is a table header cell element • <td> is a table cell element

24. Building a Table • To build a table, you start by writing out rows with <tr>. Cells are children of <tr> • <tr> takes the alignment attributes (align and valign)‏ • <tr> takes the i18n attributes. • <tr> takes the core attributes. • e.g. <table><tr><td>1</td><td>2</td></tr></table>

25. Children of <tr>: Table Cell <td> • <td> element encloses a table cell that is not a header cell • takes the alignment, core and i18n attributes • abbr= attribute for abbreviated contents • rowspan= attribute specifies how many rows a cell should span • colspan= attribute specifies how many columns a cell should span

26. Rowspan= and colspan= • Used to allow a cell to span across multiple rows, this is useful where you have headers and subheaders in a table • e.g. For financial spreadsheets • 2007 2008 • January...December January... • e.g. <td colspan="2">some text here</td>

27. Children of <tr>: Table Header Cell <th> • <th> encloses a header cell • takes the same attributes as <td> • scope= attribute specifies the set of data cells for which the current header cell provides header information • Possible values: • "row": current cell provides header information for the rest of the row that contains it.

28. Children of <tr>: Table Header Cell <th> • Possible values (cont.)‏ • "col": current cell provides header information for the rest of the column that contains it • "rowgroup": The header cell provides header information for the rest of the row group that contains it • "colgroup": The header cell provides header information for the rest of the column group that contains it

29. Table Alignment Attributes: valign= • valign= attribute specifies the vertical position of data within a cell • Possible values: • "top": flush with the top of the cell • "middle": centred vertically within the cell (default value)‏ • "bottom": flush with the bottom of the cell • "baseline": all first lines on the same level

30. Table Alignment Attributes: align= • align= attribute specifies the alignment of data and the justification of text in a cell • Possible values: • "left": left-flush data or left-justify text (default for table cells)‏ • "center": centre data or centre-justify text (default for table headers)‏ • "right": right-flush data or right-justify text. • "justify": double-justify text • "char": align text around a specific character set by a char= attribute

31. Table Alignment Attributes: char= and charoff= • char= attribute specifies a single character within a text fragment to act as an axis for alignment (default is decimal point, i.e. aligns on period in 3.25 in en_US)‏ • charoff= specifies the offset to the first occurrence of the alignment character on each line. The direction of offset is determined by the current text direction (see dir= attribute)‏

32. Example: A Basic Table <table frame="border"> <tr><th>Assignment</th><th>Mark</th><th>Due</th></tr> <tr><td>Web Site Plan</td><td>10</td><td>Feb 19</td></tr> <tr><td>Small Site</td><td>15</td><td>Feb 26</td></tr> </table>

33. Children of <table>: tbody, tfoot, thead • <tbody> identifies the body of the table • <thead> identifies the header area of a table • <tfoot> identifies the footer area • All three elements take the align= and valign= attributes • These elements can be used to specify formatting for particular areas of the table

34. Children of <table>: colgroup • <colgroup> specifies a structural column and can be used to apply formatting to individual columns, this also affects rules • <col> specifies a non structural column and does not affect rules • Both take the i18n and alignment attributes • Other attributes: span= for number of columns, width= for width of the cells

35. Deprecated Attributes • Bgcolor= changes the background colour of cells, etc. deprecated because w3c considers this a prime place to use CSS • Nowrap="nowrap" keeps the browser from splitting table contents badly, you can also use <br/> for line breaks or &nbsp; to create non breaking spaces

36. Small Site • up to 3 web pages linked • at least one image per page or structural formatting (e.g. Lists or tables)‏ • at least 3 links • proper use of XHTML tags • remember to validate your file using the correct validator • Due Feb. 26