This Sort-Of Checkers Board Was Brought to You By Rob |
When does it make sense to use a table in a web site?
According to the book, tables are only for displaying data much like you would in a MS Excel document. The table does not necessarily need to be just like a spread sheet, but it provides the same sort of organized way for displaying information using rows, columns, and cells. There is a lot more flexibility in being able to stylize the appearance of a table for a web page as opposed to an Excel page. As far as I know, you can’t display a functional Excel file on a web page across the internet. So lists with different aspects to the individual items that might be categorized or otherwise ordered in some logical fashion. It could also be a way to organize a set of objects. A photo gallery can be made with one or it could be an underlying structure for some sort of interactive application, even though there are better ways to do such things.
What are some of the effects that you can apply to a table to increase legibility?
Background color, hover features, borders, any sort of text style, background images, it can be responsive, padding, margins, and they can be positioned anywhere on a page like any other block element.
The above table has the bullseye images in the red cells. I cheated and used Dreamweaver for the swap/restore on those images. I believe it can be done another way with a lot less code, but it wasn't required. The hover effect for all of the cells is what changes the background colors. The images have transparent backgrounds. Those images also hold the shape of the overall table. They fill the cells they are are in and are square while being responsive. Without the images, the table cells would not remain square with the smaller screens. There may be another way to do that without images, I don't know. I tried using em measurements, but they kept the height. I could use totally transparent images if I really needed something like that. I think that as long as you were to use at least one on each row, you would get the consistant shape.
I just noticed that when you hover over any of the images except the one at the top/left, it makes the one at the top/left disappear. DO YOU HAVE NAY IDEA WHY IT DOES THAT? I copy/pasted that one into all the other cells but then I had to go and reset the swap image. Weird. The strangest things go wrong with these things sometimes. If this was a real job, I would have to go in there and insert those images one at a time and set the swap instead of the copy/paste.