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

<div style="size:24px;font-family:algerian" 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

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

TABLE 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