2017年6月23日金曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 13.(Tables and More Lists: Getting Tabular)、SHZRPEN YOUR PENCIL(No. 9391) を取り組んでみる。

SHZRPEN YOUR PENCIL(No. 9391)

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="sample.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>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>
      <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>

CSS(Stylehseet)

table {
    border-spacing: 0px;
}
td, th {
    border: thin dotted gray;
}

0 コメント:

コメントを投稿