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. TO DEMO: 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 top row results in changing the column of all rows
 * 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

CH-5: TABLES-CELLS
FOLLOW samples on tutorial page... Tables-Cells

CH-6: TABLES-ROWS
FOLLOW samples on tutorial page... Tables-Rows