TOPページ >  テーブルを作成する, 画像を表示する/動画/サウンド > テーブルに画像やボタンを表示する

テーブルに画像やボタンを表示する

ホームページやブログなどのウェブサイトに表を 表示させるには、 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>

同じ要領でテキストボックスやボタンなども見やすく配置することが出来ます。<table border="0">として枠を非表示にすれば。レイアウトだけ整えてすっきり見せることができます。


サンプルフォーム
タイトル
お名前
e-mail
<メッセージ>

ただし、テーブルには表示が遅いという欠点があります。よほどのことがなければ気にはなりませんが、不必要に使わないほうが良いでしょう。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス