User:Wonghk3/Sandbox/WikiTextA2

CH-7: TABLES-PLACEMENT
FOLLOW samples on tutorial page... Tables-Placement

TABLE PLACEMENT How are tables placed on a page and how do they affect other items on the page?
 * A table defaults to the left side of the page.
 * If other items are added after the table they will appear below it, not wrapped around it.

TEXT WRAPPING - LEFT SIDE OF TABLE 1. '''ADD float:right attribute to the table tag

{| style="border:1px solid red; width:100%;  float:right"


 * RESULTS: table is moved to right side of the page and text wraps around the left side of table

TEXT WRAPPING - RIGHT SIDE OF TABLE 2. '''ADD float:left attribute to the table tag

{| style="border:1px solid red; width:100%;  float:left"


 * RESULTS: table is on left of page and text wraps around the right side of table
 * NOTE:   there is no space between the text and the right side of the table.  OK to fix with margin-right attribute.

3. '''ADD margin-right attribute to the table tag {| style="border:1px solid red; width:100%; float:left;  margin-right:10px"

NO WRAPPING If you don't want the text to wrap around your table regardless where you place the table, enclose the text in either a p-tag or div-tag with the clear:both attribute

 text

TABLES IN THE MIDDLE If you want the table to be in the middle of the page, use the margin:auto attribute in the Table tag.

4. '''ADD margin:auto attribute to the Table tag

{| style="border:1px solid red; width:100%;margin:auto"

CH-8: TABLES-SORTING
FOLLOW samples on tutorial page... Tables-Sorting

TABLE WIDTH
 * Using the sample from the previous lesson, note the width of each cell is normally controlled by the largest word in a table's column.
 * We can control the table width using the WIDTH attribute: Property=Width + Value=px or percent
 * Preferred method is to use percent

1. ADD the width attribute to the opening table tag, then show preview {| style="border:1px solid red ; width:100%" 2. RESULTS: all columns are of equal width across the width of the whole page

CELL and COLUMN WIDTH
 * Recall: width of cells are controlled by the text in each cell unless we apply the width attribute for the whole table
 * To control column width, install the width attribute to the cells of the first row
 * width% of each cell must sum to 100%

3. REMOVE width from table tag line 4. ADD the width attribute to each cell of the first row ONLY, then show preview | style="border:1px solid red ; width:25%"|Apples (thru Wheat)

5. RESULTS: all rows below first row is affected similarly; meaning, all columns are of equal width within the table; note: table itself does not extend across the page

6. COMBINE width in both table tag (70%) and cell tag (as is), then show preview 7. RESULTS: Note columns are equally spaced and table extends to 70% of page width

CH-9: TABLES-SCROLLING
FOLLOW samples on tutorial page... Tables-Scrolling

CH-10: TABLES-COL ONLY
FOLLOW samples on tutorial page... Tables-Columns Only

CH-11: TABLES-COL SPANS
FOLLOW samples on tutorial page... Tables-Column Spans

CH-12: TABLES-ROW SPANS
FOLLOW samples on tutorial page... Tables-Row Spans



'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper.' Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. Morbi sollicitudin blandit sapien, eget congue nisl mollis in. Mauris ultrices porta dui vel hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a quam vulputate, luctus urna eget, molestie nisl. Praesent massa turpis, ullamcorper quis mi ac, faucibus convallis justo. Praesent vulputate lobortis est at facilisis.