[CSS]を利用して[table]を作る。

装飾的な要素・属性はすべて「CSS」まかせにしますので、<table>「HTMLソース」は “骨組み”だけの簡素なものになります。
( ※ スタイルシート「CSS」は、このページの<head></head>の中に記述しています。)

【ソース】

<head>
<meta>・・・
<meta>・・・
<title>・・・</title>
  <style type="text/css">
  <!--
  .table { /* table全体への指定。(クラス・セレクター(class="table"))*/
    width: 560px;
    border: 1px solid #666666;
    border-collapse: collapse;
    margin: 10px auto;
  }
  .table td.ph { /*(class="table")の中の写真を入れるtdへの指定。*/
    width: 320px;
    padding: 10px;
    border: 1px solid #666666;
    background-color: #ffffff;
  }
  .table td.comt { /*(class="table")の中のコメントを入れるtdへの指定。*/
    width: 200px;
    padding: 10px;
    border: 1px solid #666666;
    background-color: #ffffff;
    vertical-align: top;
  }
   -->
  </style>
</head>
<body>
<table class="table">
  <tr>
    <td class="ph"><img src="image/P120726_01am.jpg" alt="ヤマユリ"
       width="320" height="240"></td>
    <td class="comt">【ヤマユリ】<br><br>このヤマユリは山野に自生するユリの
       中で最も大きなもので、花の直径は20センチくらいあります。ササユリが
       お姫さまなら、ヤマユリは女王さまです。</td>
  </tr>
  <tr>
    <td class="ph"><img src="image/R120724_31am.jpg" alt="ノ・カンゾウ"
       width="320" height="240"></td>
    <td class="comt">【ノ・カンゾウ】<br><br>別名を「ワスレグサ」とも云い
       ます。春の若芽は「酢味噌あえ」などにすると中々美味なようです。
       その為か乱獲されて著しく生育数が減り絶滅危惧種に指定される程になって
       います。</td>
  </tr>
</table>

全面的にスタイルシートを利用すると、上のように“クラス・セレクター”(赤文字の部分) が書き込まれているだけで、全体にスッキリしています。

↓のように表示されます。(HTMLだけのものと同じです。)

ヤマユリ 【ヤマユリ】

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

別名を「ワスレグサ」とも云います。春の若芽は 「酢味噌あえ」などにすると中々美味なようです。その為か、乱獲されて著しく生育数が減り 絶滅危惧種に指定される程になっています。

 次のページ → CSSの組み込み方。

ページトップへ戻る