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



<p style="font-size:24px;color:#1AA38A">'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. <p style="color:white;background-color:blue;font-family:Bookman Old Style;font-size:24px">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. <p style="font-family:ALGERIAN">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.