Transcript Powerpoint
TABLES IN EXCEL
MORE CSS FORMATTING
GRADING
If
we comment this times, we will deduct
later
Free revalidation this week only
48
hours in effect
Google form required
Extra
credit assignment
Lessons from assignments
RDT: Read the Docs
Assignment
101 Commandments
Do not write fragile code
Nothing extra
Can you change the font or the window size and it still look good?
If deleting a CSS entry doesn’t change things, delete it?
Validate
Excel tables
to the web
Getting Tables to the Web
Tableizer
No
classes
Not
formatted
We
have had Mac problems
HTML
Formatter
Getting Tables to the Web
Mr.
Data Converter
Sets
up classes
Formatted
Caveat:
it requires that there be a value in the
upper left cell
DOM:
Document Object
Model
What are trees?
Or more like this…
A Better Example
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Descendents
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Children
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
Siblings
Sam & Bessie
Leo & Bea
Al & Jewel
Paul & Dawn
Abby
&
Phil
Peter
&
Cate
Kari
&
Hal
Mark
&
Dina
Tess
&
John
Barb
&
Ray
Sue
Dan
&
Cora
Stu
&
Chi
Mary
Leah
Al
Lori
Jen
Andy
Jake
Noah
Ben
Amy
Di
Sara
Moe
Andy
Lady
HTML Creates a tree: DOM
HTML
tags create a tree
Called
the DOM
(Document Object Model)
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
HTML
body
header
h1
ul
div
div
section
p
footer
table
p
ul
li
li
figure
child
li
li
p
p
td
td
td
tr
td
tr
td
siblings
td
div
Using the DOM
CSS
will allow us to format
selectively based on the tree
CSS Selectors
context tag {
Applies to any tag inside context
Space is a descendant selector
context > tag {
Applies to any tag directly inside context
> is a child selector
Context + tag {
Applies only to a tag that DIRECTLY FOLLOWS a context
+ is an adjacent sibling selector
HTML
body
header
h1
li
ul
div
div
section
li
p
p
td
td
td
p
tr
td
footer
table
tr
td
p
ul
li
li
td
figure
div
Child pseudo elements
W3schools
first-child, last-child, nth-child(), nth-last-child()
() options:
Number
Even-odd
Formula
Every 3rd would be 3n+0
4, 7, 11 would be 3n+1
nth-last-child counts from end