Kmmarshall/sandbox/wikitext advanced homework1-6: Difference between revisions

(homework practice)
 
m (category)
 
(4 intermediate revisions by one other user not shown)
Line 1: Line 1:
Ch. 1
'''Ch. 1 Tables -- Borders'''


{| style="border:15px ridge cornsilk"
{| style="border:15px ridge cornsilk"
|-
|Strawberries
|Broccoli
|Almonds
|Quinoa
|-
|Plums
|Corn
|Walnuts
|Oats
|-
|Cherries
|Peas
|Cashews
|Rice
|-
|Grapes
|Carrots
|Peanuts
|Rye
|}
{| style="border:15px double brown"
|-
|Strawberries
|Broccoli
|Almonds
|Quinoa
|-
|Plums
|Corn
|Walnuts
|Oats
|-
|Cherries
|Peas
|Cashews
|Rice
|-
|Grapes
|Carrots
|Peanuts
|Rye
|}
{| style="border:15px double brown"
|-
| style="border:1px solid blue" |Strawberries
|Broccoli
|Almonds
|Quinoa
|-
| style="border:1px solid blue" |Plums
|Corn
|Walnuts
|Oats
|-
| style="border:1px solid blue" |Cherries
|Peas
|Cashews
|Rice
|-
| style="border:1px solid blue" |Grapes
|Carrots
|Peanuts
|Rye
|}
'''Ch. 2 Tables -- Width'''
With our above table place a green border, "inset" style and 25 pixels wide.
Make the table 90% in width.
Next place a 1 pixel green border around the cells in the first row.
Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.
{| style="border:25px inset green; width:90%"
|-
| style="border:1px solid green; width:35%" | Strawberries
| style="border:1px solid green; width:15%" | Broccoli
| style="border:1px solid green; width:25%" | Almonds
| style="border:1px solid green; " | Quinoa
|-
| Plums
| Corn
| Walnuts
| Oats
|-
| Cherries
| Peas
| Cashews
| Rice
|-
| Grapes
| Carrots
| Peanuts
| Rye
|}
'''Ch. 3 Tables -- Widths'''
With our above table place a orange border, "outset" style and 25 pixels thick.
Make the table 85% in width.
Next place a orange border around the cells in the first column.
Make the columns the same width.
Install our Healthy Foods caption;
Font - Curlz MT
Font - 28pt
Center caption
20 pixel space between caption and top of table
{| style="border:25px outset orange; width:85%"
|+ style="font-family:Curlz MT; font-size:28pt; text-align:center; margin-bottom:20px" | Healthy Foods
|-
| style="border:1px solid orange; width:25%" | Apples
| style="width:25%; "|Peas
| style="width:25%; "|Peanuts
| style="width:25%; "|Wheat
|-
| style="border:1px solid orange" | Pears
| Carrots
| Walnuts
| Oats
|-
| style="border:1px solid orange" | Cherries
| Corn
| Cashews
| Barley
|-
| style="border:1px solid orange" | Oranges
| Beans
| Almonds
| Buckwheat
|}
Note: Experiment with the margin-bottom instruction.
'''Ch. 4 Tables -- Captions'''
With our above table place a orange border, "outset" style and 25 pixels thick.
Make the table 85% in width.
Next place a border around the cells in the first column.
Make all the columns the same width.
Install our Healthy Foods caption;
Font - Curtz MT
Font - 28pt
Center caption
20 pixel space between caption and top of table
{| style="border:10px dashed orange; width:500px"
|+ style="font-family:Curlz MT; font-size:28pt; text-align:center; margin-bottom:20px" | Healthy Foods
|-
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Fruits
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Vegetable
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Nuts
! style="border:1px solid blue; text-align:center; width:25%; background-color:lightblue; " |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
'''Note'''<br>
Semi-colon and space are unnecessary at end of style coding before ".
{| style="border:5px dotted green; width:300px"
|+ style="font-family:Comic Sans MS; font-size:28pt; text-align:center; margin-bottom:20px" | Healthy Foods
|-
! style="border:1px solid blue; text-align:right; width:25%; background-color:lightgreen" |Fruits
! style="border:1px solid blue; text-align:right; width:25%; background-color:lightgreen" |Vegetable
! style="border:1px solid blue; text-align:right; width:25%; background-color:lightgreen" |Nuts
! style="border:1px solid blue; text-align:right; width:25%; background-color:lightgreen" |Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Oranges
| Beans
| Almonds
| Buckwheat
|}
'''Notes'''<br>
*Font changes at the beginning (i.e. the title/caption) do not apply for the rest of the table. Only what's on that line.<br>
*Alignment commands in the column headings do not apply to the columns as well. Different from word processing commands that apply until changed.
*Must remember that column widths adjust to the length of the longest word in a column by default, unless coded otherwise. Makes for unattractive, uneven columns.
<p style="color:red">''Inquire what is "Parser profiling data:"''</p>
'''Ch. 5 Tables -- Cells'''
With our above table place a black border, "dotted" style and 5 pixels thick.
Make the table 600 pixels wide.
Next place a blue border around all the cells.
Place 5 pixels of padding in the header row of cells
Separate all the cells with 5 pixels.
Place a lightblue background on the column headers.
 
{| style="border:5px dotted black; border-spacing:5px; width:600px"
|-
! style="border:1px solid blue; width:25%; padding:5px; background-color:lightblue"|Fruits
! style="border:1px solid blue; width:25%; padding:5px; background-color:lightblue"|Vegetable
! style="border:1px solid blue; width:25%; padding:5px; background-color:lightblue"|Nuts
! style="border:1px solid blue; width:25%; padding:5px; background-color:lightblue"|Grains
|-
| style="border:1px solid blue"|Apples
| style="border:1px solid blue"|Peas
| style="border:1px solid blue"|Peanuts
| style="border:1px solid blue"|Wheat
|-
| style="border:1px solid blue"|Pears
| style="border:1px solid blue"|Carrots
| style="border:1px solid blue"|Walnuts
| style="border:1px solid blue"|Oats
|-
| style="border:1px solid blue"|Cherries
| style="border:1px solid blue"|Corn
| style="border:1px solid blue"|Cashews
| style="border:1px solid blue"|Barley
|-
| style="border:1px solid blue"|Orange
| style="border:1px solid blue"|Beans
| style="border:1px solid blue"|Almonds
| style="border:1px solid blue"|Buckwheat
|}
'''Note'''<br>
Stuck on getting the background color in the column headings until I removed the space between light and blue.
'''Ch. 6 Tables -- Rows'''
Place a yellow border, "groove" style and 10 pixels thick.
Make the table 700 pixels wide.
Next place a blue border around the headers.
Give the header cells a light blue background.
Change the color of the font to white.
{| style="border:10px groove yellow; width:700px"
|-
! style="border:1px solid blue; background-color:lightblue; color:white"| Fruits
! style="border:1px solid blue; background-color:lightblue; color:white"|Vegetable
! style="border:1px solid blue; background-color:lightblue; color:white"|Nuts
! style="border:1px solid blue; background-color:lightblue; color:white"|Grains
|-
| Apples
| Peas
| Peanuts
| Wheat
|-
| Pears
| Carrots
| Walnuts
| Oats
|-
| Cherries
| Corn
| Cashews
| Barley
|-
| Orange
| Beans
| Almonds
| Buckwheat
|}
'''Note'''<br>
I don't see what is being referred to in "NOTICE the left edge of the table went beyond the edge of the field. The field is only 640 pixels wide so if you go over that you will intrude on the right side of the field."
[[category:sandbox]]

Latest revision as of 14:40, 22 September 2017

Ch. 1 Tables -- Borders

Strawberries Broccoli Almonds Quinoa
Plums Corn Walnuts Oats
Cherries Peas Cashews Rice
Grapes Carrots Peanuts Rye


Strawberries Broccoli Almonds Quinoa
Plums Corn Walnuts Oats
Cherries Peas Cashews Rice
Grapes Carrots Peanuts Rye


Strawberries Broccoli Almonds Quinoa
Plums Corn Walnuts Oats
Cherries Peas Cashews Rice
Grapes Carrots Peanuts Rye


Ch. 2 Tables -- Width

With our above table place a green border, "inset" style and 25 pixels wide. Make the table 90% in width. Next place a 1 pixel green border around the cells in the first row. Make the first column 35 percent width, the second 15%, the third 25% and let the last column determine its own width.

Strawberries Broccoli Almonds Quinoa
Plums Corn Walnuts Oats
Cherries Peas Cashews Rice
Grapes Carrots Peanuts Rye


Ch. 3 Tables -- Widths

With our above table place a orange border, "outset" style and 25 pixels thick. Make the table 85% in width. Next place a orange border around the cells in the first column. Make the columns the same width. Install our Healthy Foods caption; Font - Curlz MT Font - 28pt Center caption 20 pixel space between caption and top of table

Healthy Foods
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat

Note: Experiment with the margin-bottom instruction.


Ch. 4 Tables -- Captions

With our above table place a orange border, "outset" style and 25 pixels thick. Make the table 85% in width. Next place a border around the cells in the first column. Make all the columns the same width. Install our Healthy Foods caption; Font - Curtz MT Font - 28pt Center caption 20 pixel space between caption and top of table

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


Note
Semi-colon and space are unnecessary at end of style coding before ".


Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat


Notes

  • Font changes at the beginning (i.e. the title/caption) do not apply for the rest of the table. Only what's on that line.
  • Alignment commands in the column headings do not apply to the columns as well. Different from word processing commands that apply until changed.
  • Must remember that column widths adjust to the length of the longest word in a column by default, unless coded otherwise. Makes for unattractive, uneven columns.

Inquire what is "Parser profiling data:"


Ch. 5 Tables -- Cells

With our above table place a black border, "dotted" style and 5 pixels thick. Make the table 600 pixels wide. Next place a blue border around all the cells. Place 5 pixels of padding in the header row of cells Separate all the cells with 5 pixels. Place a lightblue background on the column headers.


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


Note
Stuck on getting the background color in the column headings until I removed the space between light and blue.


Ch. 6 Tables -- Rows

Place a yellow border, "groove" style and 10 pixels thick. Make the table 700 pixels wide. Next place a blue border around the headers. Give the header cells a light blue background. Change the color of the font to white.

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Note
I don't see what is being referred to in "NOTICE the left edge of the table went beyond the edge of the field. The field is only 640 pixels wide so if you go over that you will intrude on the right side of the field."