HTML5 - CSS - Tables and More Lists: Getting Tabular(text alignmeng, center, right)

開発環境

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)、SHARPEN YOUR PENCIL(No. 9432) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 9432)

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 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;
}

Kamimura's blog

2017年6月24日土曜日

HTML5 - CSS - Tables and More Lists: Getting Tabular(text alignmeng, center, right)

0 コメント:

コメントを投稿