m

1. HTML Tables

2. Start of page where we want to place a
table

3. Design View of Page Start

4. Table we want to add to our page.

5. In Design View go to Table/Insert Table

6. Choose number of rows and columns. Click OK.

7. Table code generated

8. 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

9. 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.

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

11. The colspan attribute that arose from
merging the cells
One cell now spans all
eight columns of the table

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

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

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

15. Enter the rest of the data

16. Style code to left justify the header text

17. 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

18. Similarly, make a class for the second
header

19. Comparison of original and ours with
header styles

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

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

22. Some font adjustments

23. Comparison of original and ours with font
adjustments

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

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

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

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

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

29. Add some padding to the header cells

30. Comparison of original and ours with
padding added to header cells

31. Making the player names hyperlinks

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

33. Code to eliminate default underline style of
hyperlink.

34. Result with hyperlinks no longer
underlined

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

36. Result: Mouse is over Dalembert

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

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