6 Differences Between Table and Div For Website Layout

Some people use table for their website layout because it is easier to do. While using div needs more knowledges, especially about css. Here are the difference between table and div layout.

No	Statement	table	Div	Comments
1	ease of use	easier	harder	The concept of table is well known by most people, so it will be easier to create a table for layout, because we don't have to know css
2	Document size	bigger	smaller	Using div will decrease bandwidth and loading time
3	basic function	displaying tabular data	website layout
4	load	displayed after table completely loaded	displayed every div element loaded	displayed every div element loaded
5	maintenance	harder	easier	with a single css file, it will be much easier to change the layout and the style for the whole website
6	long content handling	columns are not squeezed under other column when the content is too wide.	for older browser, long content can make the layout unstable	read about css property, float, overflow to make it compatible to all browser

From the statements above we can conclude that it will be better to use divs for our website layout. Learn about div and css is slightly difficult for beginners, but it is a good investment to create a powerful and flexible design.

Database Normalization Steps From 1NF to 3NF

The goal of a relational database design is to generate a set of relation scheme that allow us to store informastion easily. One approach is to design scheme that are in an appropriate normal form (silberschatz, H., 1991)
We have to normalize the database in order to make it easier to maintain, develop, or to resolve the error.
It will be several steps to do, but usually it just only need till  the third step.

Overview

1  1st Normal Form / 1NF

2. 2nd Normal Form / 2NF

3. 3rd Normal Form / 3NF

4. Boyce-Code Normal Form (BCNF)

5. 4th Normal Form / 4NF

6. 5th Normal Form / 5NF

First Normal Form (1NF)

A table meets 1st Normal form if it doesn’t have multivalued attribute, composite attribute or its combination in the same data domain.

Each attribute in that table should have an atomic value (can be divided).

The example below doesn’t meet the 1NF

It can be normalized into 1NF as described below

Steps to transform unnormalized to 1NF:

1. Choose one attribute or a group of attribute to be the key in  the table
2. Identify redundant groups in the unnormalized table
3. Delete the redundant groups

Second Normal Form (2NF)

1. 1.     A table meets 2NF when the 1NF requirement is met , and all attributes except the primary key have functional dependency entirely  to the primary key.
   2.     A table doesn’t meet 2NF, if there is an attribute that its functional dependency just partial. Partially dependent on primary key.
   3.     If there is an attribute that doesn’t have a dependency to the primary key, then the attribute should be moved or deleted.

For example :

This table meets the 1NF but doesn’t meet 2NF because lesson_name doesn’t fully dependent to lesson_id as the primary key.

It should be decomposed into 2 tables,

Steps to transform 1NF to 2NF

1. Identify primary key to the 1NF relationship (based on the example above, the primary key is lesson_id) 
2. Identify functional dependencies in the relationship (the FD is lesson_id -> lesson_name) 
3. If there is partial dependencies to the primary key, delete and place it into new relationship with the copy of its determinan (lesson_name is deleted from the table student and move to the new table) 

3rd Normal Form (3NF)

When it has met the 2NF, and there is no non primary key attribute that dependent to the other non primary key, the table is met 3NF.

The table below accomplish the 2NF but not 3NF

Steps to transform 2NF to 3NF:

1. Identify primary key in the 2NF relationship
2. Identify functional dependencies in the relationship
3. If there is a transitive dependency to the primary key, delete and place it into new relationship with the copy of its determinan.

It should be decomposed into 2 tables

1. student (student_number, nae, address, postal_code)

2. postal_code (code, province, city)

With the 3NF, our table structure is good enough, remember that too many table join will slow the query.

XHTML Transitional, Strict and Frameset

If we're talking about Web Standard, then we have to know about XHTML.

XHTML divided into 3 models : transitional, strict, and frameset.

Let's start with transitional and strict models.

For anyone who wants to move to XHTML technology, the easier way is to move to XHTML transitional, that's because XHTML transitional still allows the old tag to be used. If you  used to use HTML instead of XHTML strict, you'll be surprised when validating your website because of many invalid syntax in your script. XHTML strict use Cascading style sheet (css) to make a layout and the design.

The first thing we have to know is we should declare what type of our file. With this declaration, the browsers, search engines, or website validator will know what document type they are reading.

Here are the declaration :

1. XHTML 1.0 STRICT
   
   
   <!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
   
2. XHTML 1.0 TRANSITIONAL
   
   
   
   <!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Unused Tags

Several HTML tags will not be used anymore in HTML Strict. the reason is they can be replaced with css.

1. <u> for underline can be replaced by text-decoration :underline in css

2. <Font> can be replaced by font property in cases which is the richer of style

3. <center> is replaced with text-align property.

The other tags are replaced : <i> replaced by <em> and <b> for bold replaced by <strong>.

How about the iframe tag?

iframe is not used anymore in XHTML transitional and strict, because it takes a page from the other source that can contain invalid code, and this will make your page known as invalid XHTML as well. So if you want to use it, then you have to declare your document as the XHTML frameset. Here is the declaration :

XHTML 1.0 FRAMESET

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Unused Attributes

there are some attributes that have been removed in XHTML, they are align (except for table), target in <a> tag, the reasons from W3C are almost all recent browsers have been used tabbed model for their user interfaces besides the mobile phone and PDA can not display a new window.

Note: when working in XHTML strict, we have to be careful. The document must be well structured. place any text or image within <p> tags or <div> tags. The same rule for <input> tag and <label> tag, they have to placed within <p> tags.

Get use to check the validity of your website, so you will know how the codes should be.

Create Dynamic Drop Down Menu from Database

I assumed that you have already know about PHP and mysql. Now we are talking about the algorithm to create a recursive menu. After getting the data from the database, we need to 'echo' the value in the specific HTML format with id and class name like we have talked about in the previous post.