Web design and Tables

Posted: Sat May 14, 2011 12:19 pm Post subject: Web design and Tables

Firstly, what I know about web design you could probably write on the back of a postage stamp! However as a website, I'm very pleased with it as its just a hobby for me really in connection with my photography.

A number of people constantly tell me that I should move away from Tables in my web design, as its outdated and something I should avoid. I use Tables for the postioning of each thumbnail on the various image pages of my site and the reasoning for this is to centre the thumbnails on each row and column.

What do people think about the use of Tables, should I change from how my site is designed; if so what too as someone mentioned Frames? Or is the argument about Tables just their own view and the use of Tables is nothing to be concerned about.

I know that there are various packages that I could use (CMS), but not really knowing on how to set them up; I stay away from these plus I read about security issues etc.

Any advice, viewpoints, as always greatly appreciated but can I ask one thing; please reply as if advising a 6 year old so that I can understand.......

Ian

Posted: Sat May 14, 2011 1:27 pm Post subject:

I use tables (<table>) sometimes to layout the site.
But I sometimes use div (<div>) if the site I am doing has them.
Or sometimes I do a mix.

As for frames, I read somewhere I while ago they are not great, as the page is split up into 3+ pages.

1. To create the frame (index.html)
2. Left frame menu (leftmenu.html)
3. Main page (mainpage.html)

Then if you have a header it be another .html page.
I think but not 100% sure but I think it can cause problems with search engine results, where a search engine would give a result leading to leftmenu.html or mainpage.html

I sometimes use iframe <iframe> as you can pull other content into a page like that.

You can also use CSS for image position.

NetHosted Customer Joined: 01 Aug 2007 Posts: 23

Using tables for layout cause big problems for visually impaired people using screenreaders.

Using frames for layout cause big problems for almost everybody, as things like the back button on your browser are broken as a result. Plus, it can confuse some search engines.

Current best practice is to use div tags to define each "block" of content, and an external css stylesheet to define the layout. This has the advantage that you can change the look for the entire site by amending one file, and that you can change the look of a site depending on whether it's being viewed on a computer, a mobile phone, is being printed out, and probably a couple of other ways of displaying it.

Using css also has advantages for search engine optimisation (getting your site listed fairly high up on google and other search engines for relevant search terms), because you can put the important bits of the page at the top of the page, where they're given a higher weighting, and you can put less important things (like site navigation) at the bottom of the page, but it can still appear at the top to human beings.

Posted: Tue May 17, 2011 2:49 pm Post subject:

Ian, do you hand code or use a WYSIWYG program (Dreamweaver etc...) to layout your site?

Posted: Tue May 17, 2011 4:53 pm Post subject:

Hi,

Basically, its hand coded in Dreamweaver

Ian

Posted: Tue May 17, 2011 5:07 pm Post subject:

In that case you would probably find coding your HTML without tables a lot more straightforward and logical.

How much CSS do you use?

I still find CSS frustrating (not particularly intuitive, differences in how browser interpret it), but would never go back to using tables for layout.

Posted: Tue May 17, 2011 5:27 pm Post subject:

I use CSS for colour and borders plus how my buttons work etc

Ian

Posted: Tue May 17, 2011 6:32 pm Post subject:

If you want to learn more about web design, want to improve your site's code (regardless of how it actually looks), and you think it will make you feel good to have done those things, then go for it.

However, rather than thinking about it as moving away from tables, think about it as using the right tools for the job.

Use HTML to define what your content is and CSS to define how it should look.

A very simple example: It could be argued that a thumbnail gallery is an unordered list of images. Therefore you could use this HTML (ul stands for unordered list, li stands for list item):

Posted: Wed May 18, 2011 6:39 pm Post subject:

Thanks, I like that

Ian

NetHosted Customer Joined: 29 Jan 2005 Posts: 382

Posted: Thu Jun 16, 2011 4:55 pm Post subject:

Posted: Thu Jun 16, 2011 6:02 pm Post subject:

For a good reason why to use divs & css rather than tables, take a look at this site: http://www.csszengarden.com/ and click on the links on the right. Only the css changes - the html is identical (view source to check).

Posted: Fri Jun 24, 2011 9:58 pm Post subject:

When using <table>, we're not just saying 'lay these rows and columns out so that they look like a table', we're saying 'the stuff that is in this table is tabular data'. If it's not tabular data, it shouldn't go in a table.

Once you've learned to use the right elements to describe the type of information you're putting on your site and how to lay it out with CSS, you'll never look back.

Client Support	Community	Server Status	Contact Us	Client Login
Email Hosting	Website Hosting	Reseller Hosting	VPS Hosting	Dedicated Servers