User:Bethcottam/sandbox/Interm TABLE LESSONS 5-9

PRACTICE FOR INTERMEDIATE TABLE LESSONS 5-9

Lessons 5)Editing cells:use font-size; font-family;'mark; background-color; padding (place in every cell)

TOP ROW OF CELL CAPTIONS FOR TABLE BELOW: border:1px solid red;

background-color: lightgreen

font-family: Rockwell

2nd ROW 1st CELL ATTRIBUTES

font-family: Rockwell

border:3px solid blue

font-size:20px

text-align:center

background-color:lightblue

2nd ROW 2ND CELL ATTRIBUTES

Peas Italics

2nd ROW 3RD CELL ATTRIBUTES

 Peanuts Bolded

2nd ROW 4TH CELL ATTRIBUTES

Wheat Both Italics and Bolded


 * CELL PADDING ADD: ;padding:10px    (...TO EACH CELL)


 * PADDING TO COLUMN LABELS...(only add to first cell to affect cells in row)

Wiki University Wikitext Lesson # 6--Tables - Rows

TO PLACE BACKGROUND COLOR IN THE HEADING ROW ADD THE ;background-color ATTRIBUTE TO THE ROW TAG:

Example #1: Showing all steps in lesson:

Lesson # 6) Tables - Rows: (|- style="background-color:lightgreen")

Example #2 for lesson #6:

CHANGING FONT-SIZE IN ROWS: INSTALL THE ;font-size:18px IN THE ROW TAG.

CHANGING FONT-SIZE IN ROWS: add it to the above changes like so: ; font-size:18px
 * -style="background-color:orange; font-family:Comic Sans MS;font-size:18px"

THESE ATTRIBUTES DO NOT WORK IN ROWS: width: text-align: border: padding:

THEY MUST BE PLACED IN EACH CELL TO FUNCTION:

CODING IN CELLS OVERRIDE CODING IN ROWS:

Coding in rows override coding in the table tags. This is handy to know in case you want to change an individual cell instead of deleting the coding in the row tag and then having to put coding in each cell of the row.

CHANGING COLUMNS:

Well how about columns, you ask. Sorry, there is no easy way to do columns. You have to place the codes in each of the cells of the column.

Wiki University Wikitext Lesson # 7--Tables - Placement


 * DEFAULT PLACEMENT IS ON LEFT SIDE UNDER LAST ITEM ADDED.


 * IF OTHER ITEMS ARE ADDED AFTER THE TABLE, THEY WILL APPEAR AFTER IT.

EXAMPLE:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

IF YOU WANT TABLE ON THE RIGHT SIDE ADD ;float:right TO OPENING TABLE TAG. EXAMPLE 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

IF YOU WANT TEXT WRAPPING - RIGHT SIDE OF TABLE ADD: ;float:left EXAMPLE 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

INSTALLING: ;margin-right:10px WILL ADD A SPACE BETWEEN THE TEXT AND THE R OF TABLE example 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

PLACING TABLES IN THE MIDDLE: ADD THE ;margin:auto  (without any "float: right or float;LEFT) ATTRIBUTE TO THE OPENING TABLE TAG. EXAMPLE 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

NO WRAPPING: (NO EXAMPLE SHOWN)

*IF YOU DONT WANT TEXT TO WRAP AROUND TABLE REGARDLESS WHERE YOU PLACE IT,

ENCLOSE THE TEXT IN EITHER A PARAGRAPH OR DIV TAG, THEN INSTALL THE ATTRIBUTE   IN THE OPENING PARAGRAPH OR DIV TAG. Enclose the text in either a paragraph or div tag.


 * NOTICE There is nothing between the opening and closing tags.
 * NOTICE The default is for paragraphs to NOT wrap around a table. You would use this code when you have multiple paragraphs; the first paragraph you want to wrap around the table but the second you don't want to wrap around the table.

Wiki University Wikitext Lesson # 8--Tables - Sorting

CHAPTER #9: Tables - Scrolling