Web Projects Classroom
Web Usability Design and Engineering
DATE: --/--/--(--)   CATEGORY: スポンサー広告
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
page top
DATE: 2006/10/22(日)   CATEGORY: Web Projects
Create a Website Without Tables
In my previous presentation, I have already mentioned about the advantages of using CSS, such as better accessibility, better compatibility, good for SEO, easier update process, reducing HTML page weight, etc.

Today, I am going to talk in details on how a website can be created without using any tables. Since "table" is used for data only and is not recommended to use table for building the structure, so we should avoid using it.

Now, I will show you how to convert the traditional tables to <DIV> tags in a HTML file. Suppose we have a website like this:

Web Design Sample

The first thing we need to do is to separate each part into different blocks. Here we have the header, horizontal menu, left menu and the content.

If we use tables for this layout, we may need to cheat and use a lot of colspan, rowspan or even worse, the infamous transparent GIFs (spacers). This increases the weight of the HTML.

Web Design Sample

However, if we use DIV, we will have 4 blocks here. We need to set the width, height and background on each block. For the "leftmenu", we can either use "position:absolute;" to set the absolute position or use "float:left;" to align on left. After that, we should also set the left margin for the "main" block, so that the content will not overlap with the left menu.

Now, all blocks are completely allocated and it's the time to build the menu buttons. Since we are not using table, we can't put each of the menu item into cells. So we need to find another way that can do the similar thing.

ul,li {
     list-style-type: none;
     margin: 0;
     padding:0;
     line-height: 30px;
}


For the left menu part, we can use HTML list (<UL> and <LI>). Simply use one <LI> for one item and remember to set the list-style-type to none (to avoid showing the bullets / black dots).

How about the horizontal menu? We cannot use HTML list for that, right? The solution is also simple. Just use the <A> tags instead and put them inside a <DIV> block. Finally, we will have the result here:

http://tutorials.alsacreations.com/tutocss/tuto.htm

Is that easy? If you have time, you can have a look on the sites below. They are the good examples that the whole pages does not contain any table:

http://www.cs.cityu.edu.hk/~hwchun/AIProjects/
http://courses.cs.cityu.edu.hk/cs3382/50141775/aiprojects/

References:
http://tutorials.alsacreations.com/tutocss/
http://www.htmldog.com/reference/cssproperties/
スポンサーサイト
[ TB*0 | CO*0 ] page top

COMMENT

 管理者にだけ表示を許可する

TRACK BACK
TB*URL
Copyright © Web Projects Classroom. all rights reserved. ページの先頭へ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。