HTML & CSS Direct Study

Table Apperance

***NOTE: Periods are placed at the beginning of tags only to make them visible, since they can be confused as part of the HTML to write this blog. In normal HTML code periods would not exist.

Tables in Review:

Tags:
<.table><./table> -- This tag is used to begin and end a table.
<.tr><./tr> -- This tag is used to begin and end a row.
<.td><./td> -- This tag is used to begin and end a data cell.

Elements:
Border = “ “ – This allows us to set the thickness of the border for the table.
Colspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several columns.
Rowspan = “ “ – This allows us to extend the size of one cell over a set number of cells for several rows.
Cellspacing = ” “ --
Cellpadding = “”


New Content

Tags:
<.caption><./caption> -- This optional tag that gives more details about the table.

By using these elements you can establish a consistent header and footer. These can come handy when using Databinding or data covering several pages.

<.thead><./thead>
<.tfoot><./tfoot>

While this can be accomplished with rowspans and colspans this can be used with table that is complex and extensive. This can help place headers and footers on each page making data more easily read.

Example 1:( this table uses <.caption>, <.thead>, <.tfoot>, and <.tbody>)

Example 1

Elements:

Valign = “” – This is used to align data in a Top, Center, or Bottom vertical format.

Align = “” -- This is used to align data in a Left, Right, Center horizontal format.

Height = “” – Sets the heighth of cells to allow flexible layouts and formatting

Width= “” – Can set the width of columns to make a more flexible layout.

Bgcolor = “” – This is used to change the color of the background on the table.

Bordercolor = “” – Changes the border color

Bordercolordark = “” – Allows two different color settings to create a 3D affect.

Bordercolorlight = “”– Allows two different color settings to create a 3D affect.

Example 2: (This example shows the differing border colors, along with bgcolor-- it is common in the business place to have alternating colors on data row to increase visibility)

Example 2

Concepts:

Layouts -- Table were commonly used to make entire layout for web pages, however more modern websites use division tags that allow more flexibility.

Centered Layout – This creates a simple page that could be developed in one cell or multiple cells. Navigation can easily be added to the side to allow multiple pages, however this design is very simple with similarities to printed material.

Top-Left-Bottom Layout – Commonly referred to as TLB layouts this layout follows its name. There are three cells, the first being a header/ title, the second being a Navigation bar to the left, and finally a footer with Navigation or copyright information.

Stretchable Table Layout – This layout allows for the tables to adjust to the screen. By strategically setting cell widths and heights the table will adjust to the viewer screen.

While all of these are easy layouts and template, more complicated sites require more complex tables. Using tables as a means of laying out a webpage can be very tedious and time consuming.

Databinding – This refers to generating tables from particular data sources whether they be word documents or java applets. These tables can become very powerful when connected to a database, because they can display a variety of different data and information.

Best Practices for Tables:

When developing tables always code in cellspacing, cellpadding, and borders, even if they are all set to 0. This will help visually understand how information is displayed as well as allowing you to check your work in differing browsers to ensure it looks as you had planned.

Make sure that column widths are equal with the overall width of the table this will ensure that the table appears correctly. Bad math can cause tables to come out looking incorrect.

The use of colspan or rowspan will result in altering other rows or cells. Make sure that if you use these elements you take out the corresponding rows or data cells.

Not all table elements will work in all browsers. Be sure to check out your work in each browser to make sure you achieve the desired looks.

Do not excessively nest tables. This can become busy and sometimes slow the page load speed.

Document your work!! Its hard to go back and edit if you lack documentation.