1 / 38

HTML Tables

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

bseidel
Download Presentation

HTML Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. • Apply an inline style to the particular <th> • 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) • 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 (?)

More Related