Making someone else's tables visible

HTML & CSS
1

Hi, me again! I’m now learning about tables. As I’ve said before, I learn best by doing, so I usually try to make my own exercises when learning a concept.

I would like to find a website that has a table and try to roughly duplicate it. I need to see the table in order to do that, but most sites that use tables for layouts have the tables hidden. I don’t want to read the code itself for two reasons:

  1. Would take too much time, confusing at my skill level, may waste time on table-less sites;

  2. Would defeat the purpose of trying to code it myself because I would see exactly how it’s coded.

So I’m wondering - is there a way to display the tables on a website where the tables are invisible?

Thanks!

2

mmm… not sure what you mean by ‘invisible tables’…?

Anyways, all you would have to do is ‘View Source’ do a find for the word <table and you will know instantly if a site uses tables or not. If you’re using Firebug (highly recommended) you could give the table a red border so you can see exactly where it is (this what you mean by invisible?)

On a side note, hopefully you understand that designing a site using tables for layout went out of fashion years ago. The norm now is to ONLY use tables where tables are necessary. Where are tables necessary (or preferred)? Think of tabular data… something that you would normally display in Microsoft Excel, a grid of numbers or values. Then you have something that would fit a table. Using a table for layout is a poor choice and should be avoided.

3

You could add the following line into your browser’s user stylesheet

table, tr, td {outline:1px solid #f00 !important;}

Then all the tables in any of the pages you display in your browser will have a red outline added to all the cells without affecting the page layout. Makes it really easy to see what web pages have used tables incorrectly.

4

Save the website as HTML, look for the table tag and add

border=“2”

or, change border=“0” to border=“2”

then open the file in your browser.

If you’re using FireFox you can also download and use FireBug to edit the HTML in FireFox. Changes become visible real time. Of course that’s only for your browser, if you refresh the page the changes are gone :slight_smile: