Here is one way to make adding and formatting HTML tables in your website a breeze. Cascading Style Sheets handle the presentation and then add the HTML in Excel.

Tables are widely used in website programming, often for page layout rather than their original purpose of displaying data tables.

One common use for tables is displaying results and points standings for sporting events. Excel is ideal for managing the data as it can add up round points to provide a series total and change the order of the table to show the positions of each competitor.

Cascading Style Sheets (CSS) make creating custom tables a pleasure. Without CSS the attributes of each cell had to have the attributes included in each <td width = 300 bgcolor =#006600 >.

The problem with this approach is the amount of typing to construct the table or change its appearance later.

CSS

By constructing the table with CSS, then changing its appearance is simple. In the line from our example table shows no specific formatting information. This all resides in the style sheet with the class names referring to the detailed formatting information.

<tr><td class ="rank">1</td><td class ="driverbusch">Carl Edwards</td><td class = "score7 ">4640</td></tr>

The cells that hold the drivers name have a different width and color to the other cells in the table and the class technique is used. In the Style Sheet the attributes for this class of cell are defined. The td is associated in the style sheet with the class name driverbusch with period separating them.

td.driverbusch {

width:300;

color:#ffffff;

background-color:#006600;

border-width: thin;

border-style: solid;

border-color: #ffffff;

margin: 0;

padding-left:4;

text-align: left;

}

To change the appearance of all the cells containing driver’s names only the one entry in the style sheet needs altering. The MotoGP point’s table example below shows the possible scale of altering a table’s appearance. However, to widen all the cells containing points data from each of the 18 rounds still only requires one change in the associated style sheet as all those cells are of the same class.

Excel

This is where the data meets the HTML.

Excel, or any spreadsheet, manages the table and all the HTML code, and paste the finished table into the HTML editor where the rest of the site is managed.

It is simply a matter of inserting extra columns between the data columns and adding the HTML. The editing features of Excel make this a quick task by copying the content of one cell to a range of cells. Type in the HTML for the top cell and then copy it down the column.

Even with the columns of HTML, the spreadsheet can still do all the calculating and sorting required for managing the data.

With the basic table constructed in Excel, as the sporting season progresses, paste new data into the spreadsheet and change the order. This is easy to do without compromising the HTML.

Select all the spreadsheet cells for the table, copy them, and then paste this into the HTML editor and the job is done.

For more info on Excel, visit Suite101's Software topic page.