Webとライティングの学習帳|2月のグリズリー

webサイト制作についての勉強を備忘録的に書いています。サイトやデザインに関する書評なども掲載

ウェブのお勉強はじめました(8)簡単な表のつくり方

スポンサーリンク


<table><tr><td>について

<table>~</table>・・・表組み:tr要素やtd要素と一緒に使う。

<tr>タグで囲まれた範囲は行で間に<td>タグを挟む。

<td>タグで囲まれた範囲はセル。間に文書を入れる。

日本人は表組が大好きとは習っている先生の言葉。授業で作ったのはこんなの(お医者さんの古いサイトでよく見るかも)

<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td>×</td>
</tr>
<tr>
<td>×</td><td>×</td><td></td>
</tr>
</table>

 

×
× ×

 

dlとdtとddについて

<dl>~</dl>・・・定義リスト:dt要素やdd要素と一緒に使う。

<dt>・・・定義したい語句

<dd>・・・その説明

 

<dl>
  <dt>カフェラテ</dt>
  <dd>
    <p>エスプレッソにミルク(泡々にしたスチームミルク)を混ぜる。機械が必要</p>
  </dd>
  <dt>カフェオレ</dt>
  <dd>
    <p>単純にコーヒーに牛乳を混ぜた存在。</p>
  </dd>
</dl>

 

カフェラテ

エスプレッソにミルク(泡々にしたスチームミルク)を混ぜる。機械が必要

カフェオレ

単純にコーヒーに牛乳を混ぜた存在。

 

CSSで指定してないからわかりづらいがソースコードを貼り付けて表示したのが上記。教科書ではdlは定義リスト、dtは定義リストの語句、ddは定義リストの説明文。とテキストなんかでは堅苦しく書いておりますが上記の使用例を見ればわかりやすい

つまり定義リストを作りますよと宣言し、カフェラテがその定義リストの中の語句(dt)、その内容説明が(dd)というわけです。

これは他にも新着情報などでよく使うとのこと。 つまりdlで初めてdtに日付、ddでその日付に何が起こったのかを書くような。

 

これに関してはこの記事がわかりやすかったです。

blog.nest-online.jp

 

次回の記事はいよいよCSS(だと思います)