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 each cell is normally controlled by the largest word in a table's column.
 * 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%" 2. RESULTS: all columns are of equal width across the width of the whole page

CELL and COLUMN WIDTH
 * Recall: width of cells are controlled by the text in each cell unless we apply the width attribute for the whole table
 * To control column width, install the width attribute to the cells of the first row
 * width% of each cell must sum to 100%

3. REMOVE width from table tag line 4. 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)

5. RESULTS: all rows below first row is affected similarly; meaning, all columns are of equal width within the table; note: table itself does not extend across the page

6. COMBINE width in both table tag (70%) and cell tag (as is), then show preview 7. RESULTS: Note columns are equally spaced and table extends to 70% of page width

CH-3: TABLES-CAPTIONS
FOLLOW samples on tutorial page... Tables-Captions

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