1 / 36

February 12, 2008

Week 4: Lists and Tables. February 12, 2008. Margaret Kipp margaret.kipp@gmail.com http://myweb.liu.edu/~mkipp/. Colour Charts and Required Tags. Appendix A: XHTML Elements and Attributes lists elements and attributes

oakes
Download Presentation

February 12, 2008

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

More Related