Tables Review

Recently we have been using HTML tables. Tables have fallen out of fashion for page layout but they have their purposes and you should be familiar with using tables to display tabular data.

Please read the following short pieces on tables, and then finish work on your tables data assignment.
Note: If you wish to email me I will be checking my email at NIGHT, but probably not during the day.

PLEASE READ:
What is tabular data?
http://webdesign.about.com/od/tables/a/aa122605.htm

AND ALSO READ:
Why use CSS instead of tables?
http://www.dreamtemplate.com/blog/web-design-tips/why-you-should-use-css-rather-than-tables-in-web-design-part-1/

AND ALSO READ:
CSS vs. Tables (more info)
http://www.articlesbase.com/web-design-articles/why-you-should-css-instead-of-tables-when-designing-your-web-page-473481.html

Tables are easy to hand-code in a text-editor. There are basically 3 tags involved to make a complete table.
table (table) - this tag goes at the beginning of the table.
table row (tr) - starts a row
table data (td) - fills a column with data
You use them like this:
(See image below with example code:)

The above code will output to the browser like this:

TWO-DAY ASSIGNMENT:
1. Please open Notepad ++.
2. Add all the necessary code to make a standard XHTML strict page.  (I would advise copying all the basic information - opening html tag, doctype, encoding, etc - from one of your existing pages!)
3. Write tables code to produce a table that looks like the example below. Include at least 8 famous tornado diasters.

Use the Natural Disasters or some other interesting information located in this online almanac or other appropriate source.
http://www.infoplease.com/ipa/A0001445.html

4. Remember: Include at least 8 rows in your table.
5. Include a centered image in your table.

Finishing Up Tables - Info for Feb 6th

Gentlemen,
You learned the basics of coding tables by hand the other day.
Today, let's spice up the table design and add:
a) summary
b) title
c) padding
d) spacing
e) font color
f) background color for the page
g) background color for the table

Typically, we let CSS handle the colors, padding, and spacing, but I need to illustrate the concepts of padding and spacing, and its easier to do with color involved.

Your table should look like this (but you can pick your own color scheme, provided it is readable)

Make sure you validate your code and show me the table when you are finished.

The complete assignment is listed on the Sunday/Monday blog entry for this week.

The Missing Link(s)

Please add 5 hyperlinks to almanac-type sites that contain information about famous natural disasters.
I will show you in class how to code the links.
Tables assignment is due today.
Please email me your code.

Tables on Steroids, Mates!

Gentlemen,
You learned the basics of coding tables by hand the other day.
Today, let's spice up the table design and add:
a) summary
b) title
c) padding
d) spacing
e) font color
f) background color for the page
g) background color for the table

Typically, we let CSS handle the colors, padding, and spacing, but I need to illustrate the concepts of padding and spacing, and its easier to do with color involved.

Your table should look like this (but you can pick your own color scheme, provided it is readable)

Make sure you validate your code and show me the table when you are finished.

The complete assignment is listed on the Sunday/Monday blog entry for this week.

Let's 'Table' it for Now...

For Monday we are beginning to use HTML tables. Tables have fallen out of fashion for page layout but they have their purposes and you should be familiar with using tables to display tabular data.

Please read the following short pieces on tables, and then begin work on your assignment.
Note: If you wish to email me I will be checking my email at NIGHT, but probably not during the day.

PLEASE READ:
What is tabular data?
http://webdesign.about.com/od/tables/a/aa122605.htm

AND ALSO READ:
Why use CSS instead of tables?
http://www.dreamtemplate.com/blog/web-design-tips/why-you-should-use-css-rather-than-tables-in-web-design-part-1/

AND ALSO READ:
CSS vs. Tables (more info)
http://www.articlesbase.com/web-design-articles/why-you-should-css-instead-of-tables-when-designing-your-web-page-473481.html

Tables are easy to hand-code in a text-editor. There are basically 3 tags involved to make a complete table.
table (table) - this tag goes at the beginning of the table.
table row (tr) - starts a row
table data (td) - fills a column with data
You use them like this:
(See image below with example code:)

The above code will output to the browser like this:

TWO-DAY ASSIGNMENT:
1. Please open Notepad ++.
2. Add all the necessary code to make a standard XHTML strict page.  (I would advise copying all the basic information - opening html tag, doctype, encoding, etc - from one of your existing pages!)
3. Write tables code to produce a table that looks like the example below. Include at least 8 famous tornado diasters.

Use the Natural Disasters information located in this online almanac:
http://www.infoplease.com/ipa/A0001445.html
4. Remember: Include at least 8 natural disasters in your table.

Desiging Men

Gents, lets take a breather from coding and concentrate on some design work.
Today we will finish up tables, using LAYOUT MODE. We will also:
a) learn what a DIV tag is
b) style a DIV tag
c) lay out an entire page with DIV tags

Grades for PHP cash registers are on edline.

Peer Review Day

Please peer review a fellow student's site. Use complete sentences.
Post the review here as a comment to this blog entry.
Start with:
"I am reviewing Johnny's website, which is entitled, "Bugs for Sale."

Please comment on the
a) color scheme
b) usage of fonts
c) usage of pictures
d) usage of tables and alignment (Is the main table centered? Do the columns stand out?)
e) overall attractiveness of the project

Tables Assignment below: