4 what a data cell does when it uses more than one

This preview shows page 675 - 680 out of 764 pages.

4. What a data cell does when it uses more than one row or column. 7. Default position of the caption. 8. Used to merge borders. 9. Use this property to use an image instead of a built-in marker in your lists. 10. Area between borders. 13. Adds a short description that is displayed with the table. 14. You specify HTML tables by ____, not columns. 15. We call bullets a type of list ______. Down 1. Use this property to change your list marker. 2. Don’t use tables for this. 3. list-item-position can be used to control the behavior of text ____. 5. Table cells have padding and borders, but no _____. 6. <th> is used for these. 11. <td> is for this. 12. One table inside another is called _____. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
636 Chapter 13 exercise solutions <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> td, th {border: 1px solid black;} </style> <title> Testing Tony's Table </title> </head> <body> <table> <tr> <th> City </th> <th> Date </th> <th> Temperature </th> <th> Altitude </th> <th> Population </th> <th> Diner Rating </th> </tr> <tr> <td >Walla Walla, WA </td> <td> June 15th </td> <td> 75 </td> <td> 1,204 ft </td> <td> 29,686 </td> <td> 4/5 </td> </tr> <tr> <td> Magic City, ID </td> <td> June 25th </td> <td> 74 </td> <td> 5,312 ft </td> <td> 50 </td> <td> 3/5 </td> </tr> <tr> <td>Bountiful, UT</td> <td>July 10th</td> <td>91</td> <td>4,226 ft</td> <td>41,173</td> <td>4/5</td> </tr> <tr> <td>Last Chance, CO</td> <td>July 23rd</td> <td>102</td> <td>4,780 ft</td> <td>265</td> <td>3/5</td> </tr> First, type in the “Testing Tony’s Table” HTML. Typing this in, while tedious, will help get the structure of the <table>, <tr>, <th>, and <td> tags in your head. When you finish, give it a quick test, and then add the remaining items from Tony’s table. Test that too. Continues over the page
you are here 4 637 tables and more lists <tr> <td>Truth or Consequences, NM</td> <td>August 9th</td> <td>93</td> <td>4,242 ft</td> <td>7,289</td> <td>5/5</td> </tr> <tr> <td>Why, AZ</td> <td>August 18th</td> <td>104</td> <td>860 ft</td> <td>480</td> <td>3/5</td> </tr> </table> </body> </html> Continued
638 Chapter 13 exercise solutions <table> <tr> <th> Artist </th> <th> Album </th> </tr> <tr> <td> Enigma </td> <td> Le Roi Est Mort, Vive Le Roi! </td> </tr> <tr> <td> LTJ Bukem </td> <td> Progression Sessions 6 </td> </tr> <tr> <td> Timo Maas </td> <td> Pictures </td> </tr> </table> We formatted the HTML so that it’s easier to read if you happen to be a human. BE the Browser Solution On the left, you’ll find the HTML for a table. Your job is to play like you’re the browser displaying the table. Here’s the solution.
you are here 4 639 tables and more lists The double dotted lines are giving Tony’s table a busy and distracting look. It would be much better, and wouldn’t detract from the table, if we could just have one border around each table cell. Can you think of a way to do that with styling given that you’ve just learned? You can set the border-spacing property to 0 to remove the space between the borders. table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-spacing: 0px; } Better, but we still have two lines and they’re right up against each other, so we have a double, thick, dotted border. We’d rather it just be ONE border between the cells. Wouldn’t we?

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture