[HTML]の要素と属性を使って[table]を作る。

普通の方法で「2×2」のtableを作り、CSSは使用せずにHTMLの要素属性だけで飾って見ます。


【ソース】

  HTMLの要素 : 黒字
  〃 〃  属性 : 青字
  <! - - *** - - >は“コメント”で非表示。

<table border="0" cellspacing="1" cellpadding="10" bgcolor="#666666"
      align="center" width="560">
  <col span="1" width="340">
  <col span="1" width="220">
  <tr bgcolor="#ffffff"><!-- 行の背景色を“白”に -->
    <td><img src="image/P120726_01am.jpg" alt="ヤマユリ" width="320"
      height="240"></td>
    <td valign="top">【ヤマユリ】<br><br>このヤマユリは山野に自生するユリの
      中で最も大きなもので、花の直径は20センチくらいあります。ササユリが
      お姫さまなら、ヤマユリは女王さまです。</td>
  </tr>
  <tr bgcolor="#ffffff"><!-- 行の背景色を“白”に -->
    <td><img src="image/R120724_31am.jpg" alt="ノ・カンゾウ" width="320"
      height="240"></td>
    <td valign="top">【ノ・カンゾウ】<br><br>別名を「ワスレグサ」とも云い
      ます。春の若芽は「酢味噌あえ」などにすると中々美味なようです。
      その為か、乱獲されて著しく生育数が減り絶滅危惧種に指定される程になって
      います。</td>
  </tr>
</table>

上の「ソース」を見れば一目瞭然ですが、“黒文字”のHTML要素の分量と比較すると、 “青文字の属性、属性値の分量の方が、ずっと多くなっています。”

↓のように表示されます。

ヤマユリ 【ヤマユリ】

このヤマユリは山野に自生するユリの中で最も大きなもので、 花の直径は20センチくらいあります。ササユリがお姫さまなら、ヤマユリは女王さまです。
ノ・カンゾウ 【ノ・カンゾウ】

別名を「ワスレグサ」とも云います。春の若芽は 「酢味噌あえ」などにすると中々美味なようです。その為か、乱獲されて著しく生育数が減り 絶滅危惧種に指定される程になっています。
  1. 上の表(table)の罫線は太さ1ピクセルの実線になっていますが、これは[table]の背景色(グレー)が 「セル」と「セル」の隙間(cellspacing="1")から見えているものです。
  2. 各セルの内側には「上下左右」均等に余白(cellpadding)が10ピクセルずつ設けてあります。
  3. 「CSS」を利用すれば、罫線も余白も「上下左右」をそれぞれ別個に指定することが出来て 応用範囲が広がります。
    例えば、写真が挿入してあるセルは「余白」を無しにして、その右のコメントのセルは 上と左だけに余白を設ける。などといった事が出来ます。
  4. 上の[table]タグの中には、6種類の属性が入れてありますが、この内、[bgcolor],[align]の2つは W3Cから「非推奨」とされて居り、近い将来には全面的にCSSに置き換えが必要になります。早い目に CSSをマスターして置いた方が良いというわけです。

次に、上と同じ「テーブル」を[HTML]の属性を使わずに、[CSS]の利用で実現して見ます。

 次のページ → CSSで【table】

ページトップへ戻る