When I first started webdesign, the "logical" progression from basic HTML to an organized layout involved either tables or frames. For a novice with little to no knowledge or understanding of CSS, these tools were relatively easy and made sense at the time.Now, I understand why someone may want to use either method but I also grasp the reasons why there may be better methods to design and organize a site. Still, I think that learning to use these can be a valuable lesson in HTML and design, even if the overall technique is lacking in some points. While a professional web designer should "know better," the reasons for using other methods may not compare to the ease of using tables or frames when it comes to designing a website as a hobby.
I will continue to provide explanations of how tables and frames work and how they can be used in website layout, but will also provide information on why many do not find these methods preferable as well as information on other, more preferred options.
About
A table is a rectangular container made of horizontal rows and vertical column with intersect to create smaller containers called cells. Tables are not web-specific and one may often use tables in mathematics or scientific pursuits. For examples, for may be familiar with "multiplication tables" or spreadsheets, which are both tables. An example of a basic table with rows, columns and cells is below:
Tabular Data
Tables work best for displaying tabular data - that is data which is best arranged in systematic arrangement by columns and rows. If data can be entered in an Excel spreadsheet, it would work well in a table on a web page.
When using tables and tabular data, such as in charts, one can use table headers to designate which data will be in which column or row (example).
Also, tables have 2 useful features: rowspan and colspan. These features allow a cell to span more than one row or column to contain an element which os either larger than 1 cell or belongs to more than one row or column.
Layout Use
Because tables have a somewhat rigid and clean alignment and it is easy to tell where data placed within a table will be located on a web page, they can be used to position elements with ease. With a table, one can display a number of elements (images, text, links, lists et cetera) in a perfectly straight line and have all the elements be equidistant from one another.
Furthermore, it's easy to align a whole table to the left, right or center. Alignment within cells of a table is also reactively easy to do (left, right, center, top, bottom) and tables become versatile when certain elements contained within need to be in different alignment.
It's sometimes easier to see that if an element is in a certain row and a certain column (1,2 - for instance) and another element should be positioned in a certain way relation to the first element, then one simply places it in a specific row and column (2, 3 - for example).
Also, tables may make it easier to produce a layout with 2 or more columns. A table with one row and two or three columns will produce a multi-columned layout with each column having the same length and beginning at the same height on the web page whereas some argue that there is no easy way to produce a mult-columned layout using methods such as CSS.
Disadvantages
However, tables often take longer to load and many people mistakenly splice larger layout images into tables believing that this will reduce load time when it actually does the opposite. Additionally, using tables for non-tabular data does not follow web standards and semantics.
Another percieved disadvantage is that tables almost need to be coded validly in order to work properly in any browser, even browsers which generally accept sloppy code. Tables contain many opening and closing tags - each table, table heading, row and cell require an opening and closing tag each. Considering a table with only 4 rows and 2 columns containing 8 cells; this table would require 13 pairs of opening and closing tags so it's easy to understand how it may become frustrating to those who are just learning HTML.
Summary
To recapitulate the pros and cons of tables:
- Pros
- Ease of table positioning/alignment
- Ease of cell positioning/alignment
- Rowspan/Colspan
- Easy column creation
- Cons
- Longer Loading Time
- Non web-standard
- Not Semantic
- HTML must be properly nested
- HTML tags must be properly closed
Δ = New
∇ = Updated
Back | Digg this | Post to del.icio.us
