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 tag indicates the beginning of a table The tag indicates the beginning of a row. The tag indicates the beginning of a cell Not used yet, the tag indicates a header cell

9. Non-breaking space The code 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 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 to

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

14. Enter the data for the third row which is also ’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 2.Define the style for a class and set the ’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 ’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 (?)