HTML and CSS - Tables and More Lists: Getting Tabular(border-spacingproperty)

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)、SHARPEN YOUR PENCIL(No. 9391)を解いてみる。

SHARPEN YOUR PENCIL(No. 9391)

HTML (BBEdit, Emacs)

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

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

#test_table caption {
    font-style: italic;b
    padding-top: 8px;
}
</style>

<table id="test_table">
  <caption>caption</caption>
  <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>

caption

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