User:Wonghk3/Sandbox/WikiTextA1

From FamilySearch Wiki
Jump to: navigation, search


WIKITEXT (ADVANCED): DAY-1

CH-1: TABLES-BORDERS

FOLLOW samples on tutorial page... Tables-Borders

Using the BORDER ATTRIBUTE in a TABLE

We've learned how to create a simple table with borders using the class="wikitable" code, but what if we want to customize our own table?
To effect customization, we add INLINE styling along with the BORDER attribute.

1. CREATE a basic table without borders, then show preview:

{| class="wikitable"  (TODO: remove class="wikitable", leaving only {|) 
|-
| Apples
| Peas
| Peanuts
| Wheat
|- 
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}

2. ADD A BOARDER AROUND THE WHOLE TABLE: Use INLINE styling to the OPENING TABLE TAG and the BORDER attribute, then show preview:

{| style="border:1px solid red"
RESULTS: an outer box encircles the table
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

3. ADD A BORDER AROUND EACH CELL: Use INLINE styling to EACH CELL and the BORDER attribute followed by a pipe and cell value, then show preview:

| style="border:1px solid red"|apples
RESULTS: inner boxes surround each cell value
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat




CH-2: TABLES-WIDTHS

FOLLOW samples on tutorial page... Tables-Widths

TABLE WIDTH
  • Using the sample from the previous lesson, NOTE: the width of the table on a page is controlled by the SIZE and AMOUNT of text in each row.

  • 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%"
RESULTS: all table spreads across 100% of the page; also, NOTE columns are uneven in width
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

CELL and COLUMN WIDTH
  • To control the width of each column, install the width attribute to the each cell of the first row
  • width% of all first row cells must sum to 100%

1. COPY table and paste it below first table with break between each

2. 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)

COMPARE RESULTS: columns of first table differs in width whereas column width of second table is all the same
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


NOTE:
  • changing the width in the first row cells results in all other rows behaving in like manner
  • each attribute is separated by a semi-colon




CH-3: TABLES-CAPTIONS

FOLLOW samples on tutorial page... Tables-Captions

TABLE TITLE (or Caption Tag)
  • We've learned to customize a table with borders and widths but have no title for the table
  • How do we create a title for our table?

1. ADD a pipe, a plus sign, a space, and the DESIRED TITLE after the opening table tag and before the first row, then show preview

{|
|+ Healthy Foods
|-
RESULTS: NOTE table title, BUT the text size is small
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

FONT SIZE
  • To enlarge the caption, we use our font-size attribute
  • Lets increase the font-size attribute to 24 pixels

2. ADD to the caption tag the attribute font-size, size value in pixels, and a pipe before the title

{|
|+ style="font-size:24px"|Healthy Foods
|-
RESULTS: note the larger font size in the title
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


CHANGE FONT
  • What if I want to use a different font type?

3. ADD to the caption tag the attribute font-family, its value, and a pipe before the next attribute or title

{|
|+ style="font-size:24px;font-family:new times roman"|Healthy Foods
|-
RESULTS: note the larger font size AND different font type
Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


NOTE: attributes are separated by semi-colons AND the order of the attributes do not matter on our inline styling.

CH-4: TABLES-COLUMN HEADINGS

FOLLOW samples on tutorial page... Tables-Column Headings

ADDING COLUMN HEADINGS
  • We have a title for our table, BUT what do the columns represent?
  • How do we label the columns?

1. ADD a row under the caption tag with detail cells containing an exclamation mark (!) instead of a pipe

|-
! Fruits
! Vegetables
! Nuts
! Grains
RESULTS: Column headings are bolded and centered by default but there are no borders around each cell
CHANGING COLUMN HEADINGS (adding Attributes)

2. ADD border to each heading cell (border:1px solid red)

3. ADD background color (background-color:lightgreen)

4. ADD padding within each cell (padding:5px)

5. CAUTION don't forget the pipe separating the style from the column headings

|-
! style=" border:1px solid red; padding:5px; background-color:lightgreen " | Fruits
! style=" border:1px solid red; padding:5px; background-color:lightgreen " | Vegetables
! style=" border:1px solid red; padding:5px; background-color:lightgreen " | Nuts
! style=" border:1px solid red; padding:5px; background-color:lightgreen " | Grains
RESULTS: Red border around each cell; background color changed; there is more space around each column title.
Healthy Foods
Fruits Vegetables Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat





CH-5: TABLES-CELLS

FOLLOW samples on tutorial page... Tables-Cells

EDITING CELLS
  • We can make the changes to cells as we've done in our table and column headings
  • Read off examples in Wiki Univ

1. 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
  • Another way to create space between material in cells is to place a space between the cells themselves

2. ADD border-spacing attribute to the Table tag

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


ELIMINATE BORDER SPACING
  • Place the borders of individual cells up against each other

3. ADD border-collapse attribute to the Table tag

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