Leslie’s Challenge

Time for Tables

While on Teamtalk last night, at around one in the morning, I was talking to Leslie about things that I learned.

Her challenge to me was to create a table using ARIA. Her only hint was that to be good at it, learn tables first.

I’ve wanted to learn tables for a while. I’m big into organizing information, and I’ve heard Krishna and TJ say how they don’t like tables. So I thought I’d give this a go.

After checking out tables using W3Schools, I decided to give a basic table a try.

And without further Adue…

First Name	Last Name	fave Food	Fave drink	Fave book
Valerie	Gibson	Steak	tea	The Wheel of Time
TJ	Squires	Steak&baked potato	ice cold Pepsi	Harry Potter
Krishna	Jariwala	quiesadillas	milkshake	Harry Potter

more practice

While working on this, I asked TJ if I could do something like tr, th, td, td, td, tr. Then go back up and do the same thing. So I’d be working from top to bottom, moving right, and working from top to bottom. Let’s see if it works…

First Name	Valerie	TJ	Krishna
Last Name	Gibson	Squires	Jariwala
Fave Food	Steak	Steak&Baked Potato	quasidillas
Fave Drink	Tea	Ice cold Pepsi	milkshake

I know I didn’t put the books column; I didn’t feel like finding the links again.

And then there’s Scopes

I’m going to copy my tables to this section, but I’m going to add the scope attribute to the headers. The first will specify that the headers are for a column, which, I think, they are. The second table’s scope will say it’s for a row, which is it. This is supposed to help screen readers. So let’s try it out.

First Name	Last Name	fave Food	Fave drink	Fave book
Valerie	Gibson	Steak	tea	The Wheel of Time
TJ	Squires	Steak&baked potato	ice cold Pepsi	Harry Potter
Krishna	Jariwala	quiesadillas	milkshake	Harry Potter

The “scope” attribute goes after the TH and before the >.

The next table will do the same thing, but it’s scope will be “col”.

First Name	Valerie	TJ	Krishna
Last Name	Gibson	Squires	Jariwala
Fave Food	Steak	Steak&Baked Potatoe	quasidillas
Fave Drink	Tea	Ice cold Pepsi	milkshake