User:Wonghk3/Sandbox/WikiTextA2

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:Rockwell"| Peas | style="border:1ps solid red; background-color:lightblue"| Peanuts | style="border:1ps solid red"| Wheat

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


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

CELL SEPARATION 3. ADD border-spacing attribute to the Table tag
 * Another way to create space between material in cells is to place a 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
 * Place the borders of individual cells up against each other

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

<p style="color:blue">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

<p style="color:blue">STEP-1: Encase the table between opening and closing div tags

{|...table...|}

<p style="color:blue">STEP-2: ADD the overflow:scroll attribute to the start DIV-tag

<div style= "overflow:scroll">

<p style="color:blue">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

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

<p style="color:blue">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

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


 * 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

<p style="color:blue">RECALL: How to create a BASIC two-row TABLE

<p style="color:blue">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

<p style="color:blue">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 a combined cell

EXAMPLE: Row Span without deleting the first line of the 3rd and 4th rows
RESTRICTIONS: Cannot create sortable tables with rowspans

CH-13: TEMPLATES
FOLLOW samples on tutorial page... Templates

DEFINITION of a TEMPLATE
 * a container of FIXED (non-changing) CODE that can be embedded anywhere on a page and onto many pages
 * may be text, tables, images, etc
 * used to standardize page sections
 * some templates allow for us to input 'values' that provide data or links to a page

SHOW EXAMPLES
 * Example of text/table: Aberton Parish
 * Check the breadcrumb trail, Jurisdiction Infobox, and Navbox...all are tables made into a Template


 * Example of image template:

HOW TO CREATE A TEMPLATE 1. Created the same way an ordinary article is created 2. In Search box, type Template:user-defined Template-name 3. Click on Create the page 4. Build template instructions in the edit box, then save page

HOW TO EDIT A TEMPLATE go to page where template is used, click on edit source Click Scroll to the bottom of the page and note list of templates Click Locate template of interest, then click on "Edit" OR

if you know the template, search on that template use example

CAUTION: Editing a template will change all pages where this template is embedded. Many templates have sub-templates within them which makes following the code difficult

HOW TO EMBED A TEMPLATE ENTER onto the page without the word Template

use sample

HOW TO EDIT ONLY ONE EMBEDDED TEMPLATE (use subst:template-name}}
 * To allow a template to be customized only on one page without changing the other pages using that template
 * When a template is embedded in this manner and one clicks "Edit this Page", they will see all the code used to create the template

ENTER to embed template on that one page

LIMITATIONS The size of a template is defined by the code used IN that template and cannot be adjusted when embedding