HTML and CSS - Tables and More Lists: Getting Tabular(table, nest,nth-child)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
• HTML (マークアップ言語)
• Cascading Style Sheets(CSS) (スタイルシート)

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			Tess 5/5 Tony 4/5
Why, AZ	August 18th	104	860 ft	480	3/5