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

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

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

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

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

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

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

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