HTML Tables

Start of page where we want to place a table

Design View of Page Start

Table we want to add to our page.

In Design View go to Table/Insert Table

Choose number of rows and columns. Click OK.

Table code generated

Table tags

• The <table> tag indicates the beginning of a table

• The <tr> tag indicates the beginning of a row.• The <td> tag indicates the beginning of a cell• Not used yet, the <th> tag indicates a header

cell

Non-breaking space

• The code &nbsp; gives one a non-breaking space. It’s a space but it will not allow breaking, i.e. returning to the next line on the page if the line is long.

• The table generated has non-breaking spaces in the <td> table data elements (cells) so that they are not empty. Empty cells may be rendered differently from cells with content.

Merge the cells in the first row by highlighting them (in design) and going to Table/Modify/Merge Cells

The colspan attribute that arose from merging the cells

One cell now spans all eight columns of the table

Merge the second row. Enter the text between the open and close tag. Switch the tags from <td> to <th>

Design View with the first two rows merged and switched to <th>

Enter the data for the third row which is also <th>’s.

Enter the rest of the data

Style code to left justify the header text

Code to make top header have gray background and white font color

We don’t want to style all of the headers but just the top one. There are several ways to this this. 1.Apply an inline style to the particular <th>2.Define the style for a class and set the <th>’s class attribute to that value (allows more than one item to have that style)3.Define the style for an item with a particular id and set the <th>’s id attribute to that value

Similarly, make a class for the second header

Comparison of original and ours with header styles

Establish a class for odd rows that gives them a light gray background and set the class property of the odd rows to “odd”

Comparison of original and ours with “odd” rows providing gray background

Some font adjustments

Comparison of original and ours with font adjustments

To eliminate the gaps surrounding the table cells, set the table’s cellspacing to 0px.

W3 on cellspacing and cellpadding (the border if there is one falls between the spacing and the paddding)

Comparison of original and ours with cellspacing set to zero (no more gaps)

Using a border to place a “gap” between first and second rows

Comparison of original and ours with border added to first row (bring back one gap)

Add some padding to the header cells

Comparison of original and ours with padding added to header cells

Making the player names hyperlinks

Hyperlinks with default style: underlined blue for visited and purple for visited. Real site no underline and red if you hover over it.

Code to eliminate default underline style of hyperlink.

Result with hyperlinks no longer underlined

Code to make color blue except when hovered over when it turns red

Result: Mouse is over Dalembert

Attribute to add to make a new page arise in addition to old page, instead of new page replacing the old page

Another way to style even and odd rows – doesn’t work in Internet Explorer (?)