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

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

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