webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

定義型リストとテーブル

定義型リスト

定義型リストとは「ul」、「ol」リストと少し違い、
「dt」= 用語の指定
「dd」= dtで指定した用語の定義
「dl」= 「dt」「dd」を挟む

<dl>
<dt>レモン<dt><dd>酸っぱい黄色い果物</dd>
<dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd>
</dl>


以下の文を定義型リストを使ってマークアップしてみましょう。

■ 2017-04-22 ゴールデンウィークの営業について

■ 2017-04-21 今週の日替わりメニュー(4/21 - 4/26)

■ 2017-04-14 今週の日替わりメニュー(414 - 4/19)

■ 2017-04-10 春限定のおやつがスタートしました!




テーブル

table要素を使うことで、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。
caption要素は、表のキャプション(タイトルや説明)を表します。

table要素=表全体を示す要素です。表の大きさや罫線などは、この要素に設定。
tr要素=表の行を示す要素。例えば3行の表を作成する場合はこの要素を3つ配置する。
th要素=見出し用のセルを示す要素です。
td要素=表のセル(データセル)を示す要素。例えば横に3つのセルを並べたい場合は、各tr要素の中にこの要素を3つ配置。
caption要素=表のキャプション(タイトルや説明)を表します。


<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル2-1</td>
<td>データセル3-1</td>
</tr>
<tr>
<td>データセル1-2</td>
<td>データセル2-2</td>
<td>データセル3-2</td>
</tr>
</table>
セルの結合

f:id:yachin29:20160713235449j:plain


f:id:yachin29:20160713235935j:plain

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

<table border="1" width="700px">
<caption>宿泊料金表</caption>
<tr><th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</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>休前日</th><td>19,800円</td><td>25,800円</td><td>12,800円</td><td>17,800円</td></tr>
</table>