開発環境
- 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 コメント:
コメントを投稿