User:Wonghk3/Sandbox/WikiTextA1

From FamilySearch Wiki
Jump to navigation Jump to search


WIKITEXT (INTERMEDIATE): DAY-1[edit | edit source]

RECALL:  Jeannette taught us about the Border Attribute last Friday 

<p style="border:1px solid red">Brian was here!</p>

Today we are going use that attribute to customize a table

CH-1: TABLES-BORDERS[edit | edit source]

FOLLOW samples on tutorial page... Tables-Borders

Using the BORDER ATTRIBUTE in a TABLE[edit | edit source]

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. Copy the following code, a basic table without borders, then show preview. REVIEW the opening, closing, row, & cell tags, NOTE/REMOVE the class="wikitable", then show preview:

{| class="wikitable"  
|-
| 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[edit | edit source]

FOLLOW samples on tutorial page... Tables-Widths

TABLE WIDTH (size of table across the page
  • 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 still uneven in width
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


CELL or 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[edit | edit source]

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[edit | edit source]

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