テーブルに画像やボタンを表示する
ホームページやブログなどのウェブサイトに表を 表示させるには、 TABLEタグを使ってテーブルを作成しますが、この表内には 画像やリンクを貼ったり、ボタンを作成したり、テーブル外と同様に自由に扱うことができます。
サンプルの画像を 3つ用意しました。
これで表をつくってみます。
 |
 |
 |
| とり | いぬ | ねこ |
ソースは、こんな感じになります。普通に画像を貼るのとなんら変わりません。
<table border="1">
<tr>
<td><img src="./sample/bird.gif" width="50" height="50"></td>
<td><img src="./sample/dog.gif" width="50" height="50"></td>
<td><img src="./sample/cat.gif" width="50" height="50"></td>
</tr>
<tr><td>とり</td><td>いぬ</td><td>ねこ</td></tr>
</table>
<tr>
<td><img src="./sample/bird.gif" width="50" height="50"></td>
<td><img src="./sample/dog.gif" width="50" height="50"></td>
<td><img src="./sample/cat.gif" width="50" height="50"></td>
</tr>
<tr><td>とり</td><td>いぬ</td><td>ねこ</td></tr>
</table>
同じ要領でテキストボックスやボタンなども見やすく配置することが出来ます。<table border="0">として枠を非表示にすれば。レイアウトだけ整えてすっきり見せることができます。
ただし、テーブルには表示が遅いという欠点があります。よほどのことがなければ気にはなりませんが、不必要に使わないほうが良いでしょう。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス