User:Bethcottam/sandbox/Intermediate Table Borders 1-4

Lessons 1) Table Borders:


 * (Briefly review Types of Borders from Lesson 25)


 * ADD BORDER ATTRIBUTE TO OPENING TAG

CELL BORDERS:


 * The width of the cells is controlled by the text in the cells
 * ADD BORDER ATTRIBUTE TO EACH CELL

style="border:1px solid red"

Lesson 2) Table Widths:


 * WE ONLY NEED TO ADD THE WIDTH ATTRIBUTE TO THE OPENING TAG.

{|style="border:1px solid red; width:100%"

Cell and column width


 * WE NEED TO INSTALL THE WIDTH ATTRIBUTE IN THE TOP CELLS IN EACH COLUMN

Lesson 3) Table Captions:

*The Caption tag is a pipe and a plus sign: |+ Healthy Foods

**To increase font size of caption add font-size attribute: style="font-size:24px"|Healthy Foods

***To change font of caption add font attribute: font-family:Goudy Stout

Exercise with adaptations (minus margin coding of :margin-bottom:20px;

Lessons 4) Column headings:

To label the columns we use exclamation marks: ! Heading name ...preceeded by a row heading|- ! Fruits ! Vegetables ! Nuts ! Grains (after row tag)

* You can then add other attributes suchas boarder: background color, etc.

{| style="border:1px solid red; width:100%; " ! style=" border:1px solid red; width:25%; background-color:lightgreen " |Fruits ! style=" border:1px solid red; width:25%; background-color:lightgreen " |Vegetable ! style=" border:1px solid red; width:25%; background-color:lightgreen " |Nuts ! style=" border:1px solid red; width:25%; background-color:lightgreen " |Grains
 * + style="font-size30pt; text-align:center; margin-bottom:10px; font-family:Goudy Stout" | Healthy Foods