The Internet 10/25/11 XHTML Tables CIS 228 The Internet 10/25/11 XHTML Tables

Normal Flow Block elements Inline elements Arranged vertically Line break between successive elements Margins overlap Ignore floats Inline elements Arranged horizontally Lines wrap (if they get too long) Margins add Respect float boundaries

Floats Floats are Clear property removed from the normal flow pushed to the right (or left) of the page at the point they were removed ignored by block elements in the normal flow avoided by inline elements in the normal flow float: right ; Clear property delays a block element until after any float clear: right ;

Creating a Sidebar In XHTML In CSS 1 Wrap sidebar content in a div element 2 Give div element an id attribute (e.g. id= “sidebar”) 3 Move div element to where sidebar should start In CSS 4 Set width property of the sidebar 5 Set float property of the sidebar 6 Increase margin for content next to the sidebar 7 Set clear property for content immediately below sidebar

The Position Property Absolute Fixed Relative Static top (right, bottom, left) relative to containing positioned element z-index property orders absolutely positioned elements Fixed Top (right, bottom, left) relative to viewport (browser window) Relative Top (right, bottom, left) relative to element's normal flow position Static Default (normal flow position)

XHTML Tables Table – 2 dimensional array of cells (explicit) <table> attribute: summary <caption> (must be first child of <table>) Row – 1 dimensional array of cells (explicit) <tr> table row Column – 1 dimensional array of cells (implicit) Cell – a single item (explicit) Attributes: rowspan colspan (e.g. <th colspan=“3”>) <td> table data (e.g. <td>$3.79</td>) <th> table heading (e.g. <th>price</th>)

CSS Table Properties Standard CSS properties apply to all table elements color, font, text-align, padding, border, etc. Property for <table> only caption-side: top, bottom, inherit Properties for <table>, <tr>, <th>, and <td> border-spacing: length length border-collapse: (separate, collapse, inherit) Properties for <td> and <th> align: (left, right, center, justify, inherit) valign: (top, center, bottom, inherit)

CSS List Properties Properties of <ol> and <ul> list-style list-stype-position outside, inside, or inherit list-style-image none or url (e.g. url(images/dimond.jpg)) list-style-type disc, circle, square, none decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek