DWWK-CSS3

Table

The table tag defines an HTML table. An HTML table consists of the table element and one or more tr and td elements. The th element defines a table header, the tr element defines a table row, and the td element defines a table cell.

Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

Web designers use tables for multiple purposes - positioning images and text on webpages (page layout), displaying large arrays of data, creating rectangular boxes on the webpage, creating input forms, etc.

A layout using HTML tables usually requires more HTML tags compared to a tableless layout implemented with CSS. In the extreme case when a table is used to create a single box, there are 3 tags used by the table layout (<table>, <tr> and <td>) versus 1 tag (<div>) used by the tableless layout. The greater number of tags used to implement the layout naturally leads to a worse text/markup ratio.

The larger number of table tags coupled with the fact that in most cases tables use HTML attributes instead of CSS usually leads to larger files, thus hurting the Search Engine Optimization (SEO) ranking even more.

Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool.

The following tags are commonly used when coding HTML5 and CSS page layouts:

HTML5 Tags for Web Layouts
Tag	Function	Pair	Html
div	Defines a section in an HTML document	Yes	-
ul	Defines an unordered (bulleted) list	Yes	-
li	Defines a list item	Yes	-
p	Defines a paragraph	Yes	-
br	Inserts a single line break	No	-
hr	Defines a thematic break in an HTML page	No	-
img	Defines an image in an HTML page	No	-
nav	Defines navigation links	Yes	New
header	Specifies a header for a document or a section	Yes	New
footer	Defines a footer for a document or section	Yes	New
aside	Defines content aside from the page content	Yes	New
figure	Specifies diagrams, code listings, etc	Yes	New
canvas	Defines graphics	Yes	New
hgroup	Groups a set of <h1> to <h6> elements	Yes	New
section	Defines a section in a document	Yes	New
article	Specifies independent or self-contained content	Yes	New
audio	Defines sound, such as music or other audio streams	Yes	New
video	Specifies video, such as a movie clip or other video streams	Yes	-
iframe	Defines an inline frame	Yes	-
table	Specifies a table	Yes	-