User:Wonghk3/Sandbox/WikiTextA2

WIKITEXT (INTERMEDIATE): DAY-2
COPY and USE THIS CODE TO START LESSON:

CH-5: TABLES-CELLS
FOLLOW samples on tutorial page... Tables-Cells CUSTOMIZING CELLS
 * We can make the changes to cells as we've done in our table and column headings

1. ADD VARIETY OF ATTRIBUTES to each cell | style="border:1ps solid red; font-size:20px"| Apples | style="border:1ps solid red; font-family:ALGERIAN"| Peas | style="border:1ps solid red; background-color:lightblue"| Peanuts | style="border:1ps solid red"| Wheat

CELL PADDING 2. ADD CELL PADDING to each cell | style="border:1ps solid red;  padding:10px"| Apples | style="border:1ps solid red;  padding:10px"| Peas | style="border:1ps solid red;  padding:10px"| Peanuts | style="border:1ps solid red;  padding:10px"| Wheat
 * To create space around the material (text) within a cell:


 * RESULTS: Just the row with Apples, Peas, Peanuts, and Wheat contain padding

CELL SEPARATION 3. ADD border-spacing attribute to the Table tag
 * To create space between the cells themselves.

{| style="border:1px solid red; width:100%;  border-spacing:10px"

ELIMINATE BORDER SPACING 4. ADD border-collapse attribute to the Table tag
 * To remove the internal double boarder leaving a single border line around each cell.

{| style="border:1px solid red; width:100%;  border-collapse:collapse"

CH-6: TABLES-ROWS
FOLLOW samples on tutorial page... Tables-Rows
 * How can we make changes to cells in a row without having to put code into each cell?
 * Here is an example of adding (building) multiple attributes for a row:

CHANGING BACKGROUNDS IN A ROW 1. '''ADD background attribute to the row tag

|- style="background-color:#99e6ff"

CHANGING FONT-FAMILY IN ROWS 2. '''ADD font-family attribute to the row tag

|- style="background-color:#99e6ff; font-family:new times roman"

CHANGING FONT-SIZE IN ROWS 3. '''ADD font-size attribute to the row tag

|- style="background-color:#99e6ff; font-family:new times roman; font-size:14pt"

CHANGING TEXT COLOR IN ROWS 4. '''ADD color attribute to the row tag

|- style="background-color:#99e6ff; font-family:new times roman; font-size:14pt; color:blue"

CHANGING HEIGHT OF ROWS 5. '''ADD height attribute to the row tag

|- style="background-color:#99e6ff; font-family:new times roman; font-size:14pt; color:blue; height:50px"

ATTRIBUTES THAT DO NOT WORK IN ROWS '''Refer to Wiki University documentation

CHANGING COLUMNS <p style="color:blue">'''There is no easy way to do columns; must place codes in each cell of the column

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 <p style="color:blue">1. '''ADD float:right attribute to the Table tag


 * (a) change table tag to width:50%
 * (b) copy Lorem ipsum paragraph to bottom of table, then show preview
 * (c) add float:right to table tag, then show preview

{| 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
 * NOTE: text lines up with the table heading --> place p-tag around text and use the padding-top attribute

<p style="padding-top:30px">Lorem ipsum


 * RESULTS: text drops down to line up with table details

TEXT WRAPPING - RIGHT SIDE OF TABLE <p style="color:blue">2. '''ADD float:left attribute to the Table tag

{| style="border:1px solid red; width:50%;  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.

<p style="color:blue">3. '''ADD margin-right attribute to the Table tag {| style="border:1px solid red; width:50%; 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

<p style="clear:both"> 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.

<p style="color:blue">4. '''ADD margin:auto attribute to the Table tag

{| style="border:1px solid red; width:50%;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.

<p style="color:blue">ADD class="sortable" after the table tag, before the inline style of the Table tag

{| 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

<p style="color:blue">STEP-1: Change table tag width from 50% to 2000px, then show preview

{| style="border:1px solid red; width:2000px"


 * RESULTS: table is expanded off the screen.

<p style="color:blue">STEP-2: Encase the table between opening and closing Div tags , then show preview

{|...table...|}


 * RESULTS: note, no effect.

<p style="color:blue">STEP-3: ADD the overflow:scroll attribute to the opening DIV-tag , then show preview

<div style= "overflow:scroll">


 * RESULTS: note, horizontal scroll bar at bottom of table.

<p style="color:blue">STEP-4: Horizontal Scroll If the table is excessively wide, limit the table width to a desired size using the width attribute in the DIV-tag , then show preview

<div style="overflow:scroll; width:50%">


 * RESULTS: note, table size is shrunk but horizontal scroll bar is still at bottom of table.

<p style="color:blue">STEP-5: Vertical Scroll If the table is excessively tall, limit the table height to a desired size using the height attribute in the DIV-tag , then show preview

<div style="overflow:scroll; width:50%;  height:140px">


 * RESULTS: note, the vertical scroll bar on the right 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.