開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 13.(Tables and More Lists: Getting Tabular)、A SERIOUS EXERCISE(No. 9469) を取り組んでみる。
A SERIOUS EXERCISE(No. 9469)
City | Date | Temperature | Altitude | Population | Diner Rating |
---|---|---|---|---|---|
Walla Walla, WA | June 15th | 75 | 1,204 ft | 29,686 | 4/5 |
Magic City, ID | June 25th | 74 | 5,312 ft | 50 | 3/5 |
Bountiful, UT | July 10th | 91 | 4,226 ft | 41, 173 | 4/5 |
Last Chance, CO | July 23rd | 102 | 4,780 ft | 265 | 3/5 |
Truth or Consequences, NM | August 9th | 93 | 4,242 ft | 7,289 | 5/5 |
Why, AZ | August 18th | 104 | 860 ft | 480 | 3/5 |
HTML5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="journal.css"> <title>Testing Tony's Travels</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 class="center0">June 15th</td> <td class="center0">75</td> <td class="right0">1,204 ft</td> <td class="right0">29,686</td> <td class="center0">4/5</td> </tr> <tr> <td>Magic City, ID</td> <td class="center0">June 25th</td> <td class="center0">74</td> <td class="right0">5,312 ft</td> <td class="right0">50</td> <td class="center0">3/5</td> </tr> <tr> <td>Bountiful, UT</td> <td class="center0">July 10th</td> <td class="center0">91</td> <td class="right0">4,226 ft</td> <td class="right0">41, 173</td> <td class="center0">4/5</td> </tr> <tr> <td>Last Chance, CO</td> <td class="center0">July 23rd</td> <td class="center0">102</td> <td class="right0">4,780 ft</td> <td class="right0">265</td> <td class="center0">3/5</td> </tr> <tr> <td>Truth or Consequences, NM</td> <td class="center0">August 9th</td> <td class="center0">93</td> <td class="right0">4,242 ft</td> <td class="right0">7,289</td> <td class="center0">5/5</td> </tr> <tr> <td>Why, AZ</td> <td class="center0">August 18th</td> <td class="center0">104</td> <td class="right0">860 ft</td> <td class="right0">480</td> <td class="center0">3/5</td> </tr> </table> </body> </html>
CSS(Stylehseet)
table { border-spacing: 0px; } td, th { border: thin dotted gray; } .center0 { text-align: center; } .right0 { text-align: right; } th { background-color: #cc6600; } tr:nth-child(odd) { background-color: #fcba7a; } /* .cellcolor { */ /* background-color: #fcba7a; */ /* } */
0 コメント:
コメントを投稿