HTMLの復習 - WEBサイト制作の勉強

f:id:yachin29:20160307135340p:plain

行は　row

列は　col

宿泊料金表
部屋タイプ　ツイン　シングル
グレード　スタンダード　エグゼクティブ　スイート　スタンダード　エグゼクティブ
平日　15,800円　20,800円　58,000円　9,800円　14,800円
休前日　19,800円　25,800円　12,800円　17,800円

共通室内設備

Wi-Fi
加湿空気清浄機
液晶テレビ
冷蔵庫

シングル・スタンダードルーム
最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。

ツイン・スタンダードルーム
上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。

間取り図

シングルルーム
f:id:yachin29:20160307135646g:plain
ツインルーム
f:id:yachin29:20160307135652g:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの復習</title>
<style>
table {
    border-collapse: collapse;
    border: 1px solid #006;
}
th {
  background: #8b4513;
  color: #FFFFFF;
  border: 1px solid #006;
  padding: 10px 5px;
}
th.room {
  background: #FCF;
  color: #222;
}
th#holiday {
  background: #F33;
  color: #FFF;
}
td {
  border: 1px solid #006;
  padding: 10px 5px;
}
h1 {
  background: #0F6;
  width: 400px;
  margin: 0 auto 50px;
  padding: 30px 0 50px;
  text-align: center;
}
</style>
</head>

<body>
<h1>メトロホテル</h1>
<table>
<caption>宿泊料金表</caption>
<tr><th>部屋タイプ</th><th colspan="3" class="room">ツイン</th><th colspan="2" class="room">シングル</th></tr>
<tr><th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td></tr>
<tr><th>平日</th><td>15,800円</td><td>20,800円</td><td rowspan="2">58,000円</td><td>9,800円</td><td>14,800円</td></tr>
<tr><th id="holiday">休前日</th><td>19,800円</td><td>25,800円</td><td>12,800円</td><td>17,800円</td></tr>
</table>

<h2>共通室内設備</h2>
<ul>
<li>Wi-Fi</li>
<li>加湿空気清浄機</li>
<li>液晶テレビ</li>
<li>冷蔵庫</li>
</ul>

<dl>
<dt>シングル・スタンダードルーム</dt>
<dd>最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。</dd>

<dt>ツイン・スタンダードルーム</dt>
<dd>上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。</dd>
</dl>

<h2>間取り図</h2>
<h3>シングルルーム</h3>
<p><img src="room_01_layout.gif" alt="#"></p>
<h3>ツインルーム</h3>
<p><img src="room_05_layout.gif" alt="#"></p>
</body>
</html>

行は row

列は col

行は　row

列は　col