2015年1月5日月曜日

開発環境

Head First HTML and CSS (Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media)のChapter 13(Tables and More Lists: Getting Tabular)、BRAIN POWER(No. 9582)を解いてみる。

BRAIN POWER(No. 9582)

HTML (BBEdit, Emacs)

<style>
#test_table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    border-spacing: 0px;    
    caption-side: top;
}

#test_table th, td{
    border: thin dotted gray;
    padding: 5px;
}

.test_center {
    text-align: center;
}

.test_right {
    text-align: right;
}

#test_table th {
    background-color: #cc6600;
}

.test_cellcolor {
    background-color: #fcba7a;
}

#test_table table tr:nth-child(odd) th,
#test_table table tr:nth-child(odd) {
    background-color: skyblue;
}

#test_table table tr:nth-child(even) th,
#test_table table tr:nth-child(even) {
    background-color: pink;
}
</style>
<table id="test_table">
  <caption>caption</caption>
  <tr>
    <th>City</th>
    <th>Date</th>
    <th>Temperature</th>
    <th>Altitude</th>
    <th>Population</th>
    <th>Diner Rating</th>
  </tr>
  <tr>
    <td>Bountiful, UT</td>
    <td class="test_center">July 10th</td>
    <td class="test_center">91</td>
    <td class="test_right">4,226 ft</td>
    <td class="test_right">41,173</td>
    <td class="test_center">4/5</td>
  </tr>
  <tr>
    <td class="test_cellcolor">Last Chance, CO</td>
    <td class="test_cellcolor test_center">July 23rd</td>
    <td class="test_cellcolor test_center">102</td>
    <td class="test_cellcolor test_right">4,780 ft</td>
    <td class="test_cellcolor test_right">265</td>
    <td class="test_cellcolor test_center">3/5</td>
  </tr>
  <tr>
    <td rowspan="2">Truth or Consequences, NM</td>
    <td class="test_center">August 9th</td>
    <td class="test_center">93</td>
    <td class="test_right" rowspan="2">4,242 ft</td>
    <td class="test_right" rowspan="2">7,289</td>
    <td class="test_center">5/5</td>
  </tr>
  <tr>
    <!--  -->
    <td class="test_center">August 27th</td>
    <td class="test_center">98</td>
    <!--  -->
    <!--  -->
    <td class="test_center">
      <table>
        <tr><th>Tess</th><td>5/5</td></tr>
        <tr><th>Tony</th><td>4/5</td></tr>
      </table>
  <tr>
    <td class="test_cellcolor">Why, AZ</td>
    <td class="test_cellcolor test_center">August 18th</td>
    <td class="test_cellcolor test_center">104</td>
    <td class="test_cellcolor test_right">860 ft</td>
    <td class="test_cellcolor test_right">480</td>
    <td class="test_cellcolor test_center">3/5</td>
  </tr>
</table>
caption
City Date Temperature Altitude Population Diner Rating
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
August 27th 98
Tess5/5
Tony4/5
Why, AZ August 18th 104 860 ft 480 3/5

0 コメント:

コメントを投稿