Forget table, try div

One of the greatest advantage of CSS is the use of “div” to achieve total flexibility in terms of styling. “div” are unlike “table”, where contents are ‘locked’ within a “td”’s cell. It’s safe to say most “table” layouts are achievable with the use of “div” and proper styling, well maybe except massive tabular contents.

What is a Table?

If you are a web designer, the chances of implementing tables in your layout may be plenty. Tables are useful for superior adjustment of data and aligning text and graphics. General syntax of a table starts with “table” and ends with “table” element. Tables are modified using various attributes such as ALIGN, BORDER, CELLPADDING, CELLSPACING, WIDTH etc… The tags “tr” and “td” are useful in defining each cell of a table.

It would be easier to understand, if we imagine a table as an excel sheet. The entire spreadsheet would be in horizontal and vertical rows. Rows start with numbers and columns start with alphabets. A combination of each row and a column would form a cell (A1). In order to incorporate a similar feel on web pages with advance attributes, we use tables.

This website clearly explains the various parameters used in tables with examples.
Let us consider a simple example to understand a table structure.

<table border=”1″ height="100%" width="100%" align="left" cellpadding="0" cellspacing="0">
	<tr>
		<th>Heading</th>
		<th>Another Heading</th> </tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td> </tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td> 
	</tr>
</table>

What is a DIV?

Division tags are block-level elements which appear as rectangular blocks with specific height and width on a web page. They are used to divide the content of webpage and apply independent formatting. They can be used to enclose paragraphs, headers and other block elements.

“div” tags when used with style sheets is commonly referred as Cascading Style Sheets. They allow website to be independent of data. Document layout, height and width of columns or rows, adding colors; adjusting the font family, font size, adding images, using additional attributes to align the web elements can all be done by editing a single style sheet.

We added some useful information on CSS on the later part of this article.

We can style each “div” tag differently to suit the layout. For example:

<div id="container">
	<div id="header">Header part will go from here...</div>
	<div id="wrapper">
		<div id="leftpane">Left part will go from here...</div>
		<div id="content">Content part will go from here...</div>
		<div id="rightpane">Right part will go from here...</div>
	</div>
	<div id="footer">Footer part will go from here...</div>
</div>