Webmaster Sessions

Tables

HTML tables are one of the most frequently used tags. The main purpose of a table is to present data in an organized fashion, but tables are regularly used for website layout as well. With tables, space on a web page can be divided into many, many sections.

A simple table example is as follows:

<table  border="1">
  <tr><td>A  simple Table</td></tr>
</table>

A simple Table

The <table> tag encloses the contents of each table. Tables can contain an unlimited number of tables, but that can get quite confusing. The <tr> tag defines a table row, and the <td> tag defines a table cell. A table can contain an unlimited number of rows and cells. The border attribute on the table tag defines the border around the table. A border value of 0 will show no border.

Lets see what a more complex table looks like:

<table  border="1">
  <tr>
    <td>Table  Cell 1</td>
    <td>Table  Cell 2</td>
  </tr>
  <tr>
    <td>Table  Cell 3</td>
    <td>Table  Cell 4</td>
  </tr>
</table>

Table Cell 1	Table Cell 2
Table Cell 3	Table Cell 4

In this example, each table row contains two table cells. When rendered by the web browser, the four cells will show in their current positions. The number of cells need to stay the same in each table row and column, or the rendering of the table will be unpredictable from browser to browser.

Using the attributes colspan and rowspan, a table can contain a less number of cells in each row. The colspan attribute specifies the number of columns the table cell will span across, and the rowspan attribute specifies the number of rows the table cell will span.

The following example demonstrates the colspan and rowspan attributes.

<table  border="1">
  <tr>
    <td  colspan="3">Table Cell 1</td>
  </tr>
  <tr>
    <td  rowspan="2">Table Cell 2</td>
    <td  colspan="2">Table Cell 3</td>
  </tr>
  <tr>
    <td>Table  Cell 4 </td>
    <td>Table  Cell 5 </td>
  </tr>
</table>

Table Cell 1
Table Cell 2	Table Cell 3
	Table Cell 4	Table Cell 5

Using the colspan and rowspan attributes, all sorts of grids can be developed. This is the basics of how website table layout is achieved.

The table header can be a useful feature when using tables to display data. The <th> tag is used in place of the <td> tag to display a table header. Table headers are displayed as centered and bold in most web browsers.

<table  border="1">
  <tr>
    <th>Table  Cell 1</th>
    <th>Table  Cell 2</th>
    <th>Table  Cell 3</th>
  </tr>
  <tr>
    <td>Table  Cell 4</td>
    <td>Table  Cell 5</td>
    <td>Table  Cell 6</td>
  </tr>
  <tr>
    <td>Table  Cell 7</td>
    <td>Table  Cell 8</td>
    <td>Table  Cell 9</td>
  </tr>
</table>

Table Cell 1	Table Cell 2	Table Cell 3
Table Cell 4	Table Cell 5	Table Cell 6
Table Cell 7	Table Cell 8	Table Cell 9

In the past, and into the foreseeable future, HTML tables have and continue to play an important role in website layout and design. While tables are an important and easy way to create a website layout, cascading style sheets (css) offer a better solution. With css, the same website layout can be achieved with less code, making the site easier to maintain. With that in mind, HTML tables are still a very popular way to create a website layout.

As mentioned on the previous page, tables can be used to create all sorts of layouts. Tables can contain other tables as well, thereby adding to the possible website layout complexities. The following is an example:

<table  width="100%" border="1" >
  <tr>
    <td  colspan="2">Header</td>
  </tr>
  <tr>
    <td  width="20%" height="300">Left Menu</td>
    <td  width="80%" height="300">Content</td>
  </tr>
  <tr>
    <td  colspan="2">Footer</td>
  </tr>
</table>

Header
Left Menu	Content
Footer

This is a classic website layout with a header, footer, left menu, and content section. The height attribute in the left menu and content sections and the table border attribute are for demonstration purposes. With a real website layout you’d want a border value of 0 and no height attribute in the left menu and content sections. The height of those two sections would then vary with the amount of content on the page.

There are virtually a limitless number of ways a website can be designed. Play around with the table row and cell tags until you get the look you want. If you find a website layout you like on an existing website, you can always check the html code behind it to figure out how they achieve that layout. In most web browsers, there is a view source menu command to show the html code behind the scenes of the website.

Popularity: 14% [?]