User:Wonghk3/Sandbox/WikiTextA1

WIKITEXT (INTERMEDIATE): DAY-1
RECALL: Brian taught us about the Border Attribute last Friday

Brian was here!

Today we are going use that attribute to customize a table

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. 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:

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

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

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

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


 * 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

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

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

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?

<p style="color:blue">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) <p style="color:blue">2. ADD border to each heading cell (border:1px solid red) <p style="color:blue">3. ADD background color (background-color:lightgreen) <p style="color:blue">4. ADD padding within each cell (padding:5px) <p style="color:blue">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.