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 SORTING How can we sort a column to find data if it's a long table?
 * Use a "class" called sorting.
 * Place the "class" BEFORE the inline style code on the TABLE tag.
 * Separate the class from the inline style code by a space.

ADD class="sortable" after the table tag, before the inline style

{| class="sortable" style="border:1px solid red; width:100%


 * RESULTS:
 * small arrows pointing up and down appear alongside the headings
 * clicking on the arrows in a column arranges the data alphabetically in that column
 * clicking the same arrow arranges the data in reverse alphabetical order
 * the items in the rows stay together with the item in the column that was sorted
 * when you leave the page, the order of the items reverts back to its original position

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

TABLE SCROLLING Occasionally we may want to insert a very large table that may be too long or too wide or both to see all of it on a page. How can we make these large table useful? We create horizontal or vertical scroll bars (like the one on this page).

HOW TO CREATE SCROLL BARS

STEP-1: Encase the table between opening and closing div tags

{|...table...|}

STEP-2: ADD the overflow:scroll attribute to the start DIV-tag



STEP-3: Horizontal Scroll If the table is excessively wide, limit the table width to a desired size using the width attribute in the DIV-tag



STEP-4: Vertical Scroll If the table is excessively tall, limit the table height to a desired size using the height attribute in the DIV-tag




 * RESULTS: notice the scroll bar on the bottom and side of the table
 * BEWARE: width attribute used in the DIV-tag must be LESS THAN that in the TABLE-tag; and
 * height attribute used in the DIV-tag must be LESS THAN that in the TABLE-tag or page height.

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

TABLE WITH COLUMNS ONLY

RECALL: How to create a BASIC two-row TABLE

EXPLAIN: We can also create a table using a SINGLE ROW.
 * The number of cells would equal the number of columns to be displayed.
 * Items will be listed under each cell preceeded by an asterisk.
 * Add a width attribute to the TABLE-tag to spread the resulting columns across the page.

RESULTS

EXAMPLE: REVIEW an actual page in Wiki
 * Go to New Hampshire Genealogy, then Counties Header
 * Note how the Counties appear; do an 'Edit Source' on this header
 * Note how the Counties are linked to their corresponding county page

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

SPANNING COLUMNS IN TABLES Sometimes we want a cell to cover more than one column For example, how can we combine two table headings?

HOW TO SPAN COLUMNS

<p style="color:blue">STEP-1: USE a class called "colspan" in the | or ! tag <p style="color:blue">STEP-2: ADD width attribute to the | or ! tag <p style="color:blue">STEP-3: DELETE the other two | or ! lines

EXAMPLE: With Column Span
RESTRICTIONS: (1) Columns must add up; and, (2) cannot create sortable tables with colspans

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

SPANNING ROWS IN TABLES Besides spanning columns, we can span rows.

HOW TO SPAN ROWS

<p style="color:blue">STEP-1: USE a class called "rowspan" in the | tag <p style="color:blue">STEP-2: DELETE the first line of the third and fourth row tags; it is combined

EXAMPLE: With Row Span without deleting the first line of the 3rd and 4th rows
RESTRICTIONS: (1) Columns must add up; and, (2) cannot create sortable tables with colspans