User:Wonghk3/Sandbox/WikiTextA1

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:

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?

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.

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
 * <p style="color:red"> Read off examples in Wiki Univ

<p style="color:blue">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 <p style="color:blue">2. 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 <p style="color:blue">3. 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 <p style="color:blue">1. '''ADD background attribute to the row tag

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

CHANGING FONT-FAMILY IN ROWS <p style="color:blue">2. '''ADD font-family attribute to the row tag

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

CHANGING FONT-SIZE IN ROWS <p style="color:blue">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 <p style="color:blue">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 <p style="color:blue">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 <p style="color:blue">'''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