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 INLINE STYLING to the OPENING TABLE TAG and the BORDER ATTRIBUTE: {| style="border:1px solid red"

3. RESULTS: an outer box encircles the table 4. ADD the BORDER ATTRIBUTE to EACH CELL: | style="border:1px solid red"|apples

5. 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: {| style="border:1px solid red ; width:100%" 2. RESULTS: all columns are of equal width

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. ADD the width attribute to each cell of the first row; will effect all other rows similarly | style="border:1px solid red ; width:25%"|Apples (thru Wheat)

4. RESULTS: all columns are of equal 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