Give This Web Page Some LIFE!

In the previous proof, I had created some examples of how CSS can spice up my page a bit but it was mainly to demonstrate how to formulate an In-line Element. This proof will be more focused on how to sharpen the Block-level elements. First I will explain what these terms mean.

Tables

Lets start off with a nice table of a VERY small amount of my favorite bands and their info:

Radical Music Selection
Band Name Song Title Genre Latest Album I Have
Funeral For a Friend Recovery Alternative Tales Don't Tell Themselves
Taking Back Sunday Liar(It Takes On to Know One) Alternative Louder Now: Partone
The Wedding Misery Loves Company Christian Alternative Polarity
Silverstien Sound of The Sun Alternative Arrivals and Departures
Emery The Party Song Alternative I'm Only A Man
Mae Brink of Disaster Alternative Singularity
Jack Johnson What You Though You Need Adult Alternative/ Folk Sleep Through The Static

Now wasn't that fun? I apologize if you think that my music is of bad taste but at least you have seen the markup of a pretty simple table.

As you see here I added a "class" to table so that I could use CSS to change how the table actually looks. All I really did was put some padding around the table and cells, give the headers a consistent background color, and put a border around the table.

A caption was also added to give the table a more defined name

To add more to an advanced table setup, the following is the same table with a merged table cell plus a new column:

Band Name Song Title Genre Latest Album I Have
Recent Album Number of Albums in Possession
Funeral For a Friend Recovery Alternative Tales Don't Tell Themselves 4
Taking Back Sunday Liar(It Takes On to Know One) Alternative Louder Now: Partone 4
The Wedding Misery Loves Company Christian Alternative Polarity 4
Silverstien Sound of The Sun Alternative Arrivals and Departures 4
Emery The Party Song Alternative I'm Only A Man 4
Mae Brink of Disaster Alternative Singularity 4
Jack Johnson What You Though You Need Adult Alternative/ Folk Sleep Through The Static 4

This was just a way to split my header for recent-album column and the number-of-albums-in-possesion column in order to get a little more detail under one category. I did this by using rowspans and colspans.

Now let have a little fun with the next one. Before I spoil it let me just give an example. This next table is a critical one! Here is the scenario. Lets pretend that you are a superhero and in your last fight with the poisonous flower-eater, you were blinded by its shooting venom straight to the eyes. In other words, your blind! Now you have to go online to find the right antidote and -- assuming you have a screen reader -- you find a site that has a table of certain antidote to venom. The drawback. If the table does not follow accessibility standards, you'll could get the wrong antidote and be done for. So how do we accomplish this then? Here is the scope attribute.

Choose Wisely
Symptoms Antidotes Side Affects of Wrong Antidote Culprit
Super-Duper Hero rash, headache, and itchy eyes Frogeye Serum Bowel movements, hair loss, swollen gums, and squinting Grandma's Fruitcake
Duper Hero boils, smelly breath, and itchy head Tobias Serum Random body movements, heart spasms, and undeniable urge for attention Bro. Robertson
Hero bumps, toothache, and elongated nail beds Love Potion #9 low self-worth, patchy facial hair, carpal tunnel, and Turrets Syndrome Landlord-who-will-charge-you-for-anything
Super Hero blindness, loss of orientation, acute sense of hearing See-Monkey Do-Monkey Serum death Poisonous Flower-Eater

So the idea behind the "scope attribute" was to give the table more accessibility so that in case a blind user were to grace the site and find the table, the scope would direct him across or down. I ended up also putting headers for the rows too so that the table was also horizontally accessible.

Hope you enjoyed the table proof