レイアウト・配置 <table><tr><td>｜HTML辞典｜HTMLタグ・CSS

Home≫HTML辞典≫レイアウト・配置 <table><tr><td>
サイト内検索

レイアウト・配置 <table><tr><td>

≪ テーブルタグの説明３ 【 HOME 】 分割フレームタグ <frame> ≫
Yahoo!ブックマークに登録Yahoo!ブックマークに登録 Google Bookmarks に追加Google Bookmarks に追加 はてなブックマークに登録はてなブックマークに登録 livedoorに記事をクリップlivedoorに記事をクリップ
テーブルタグページ一覧
解説 テーブルタグの説明が多くなるので下記のページに分けました。
  • テーブルタグについて
    テーブルタグの基本的なサンプルや概要を紹介したページ。
  • テーブルタグの説明１
    テーブルに指定する背景色や線の色、背景画像についての説明。
  • テーブルタグの説明２
    テーブルの余白や位置、縦横サイズの指定についての説明。
  • テーブルタグの説明３
    マス（セル）の結合、グループ化させる指定についての説明。
  • テーブルをレイアウトに使う（現在のページ）
    テーブルをレイアウトの基盤として使うときの方法を紹介しています。
テーブルタグをレイアウトに活用する
見本 <table cellspacing="10">
<tr>
<td><img src="img/zoo-small01.jpg" width="150" height="106" alt="動物写真１" /></td>
<td align="center">動物写真</td>
<td><img src="img/zoo-small02.jpg" width="150" height="106" alt="動物写真２" /></td>
</tr>
<tr>
<td align="center">ギャラリー</td>
<td><img src="img/zoo-small03.jpg" width="150" height="106" alt="動物写真３" /></td>
<td align="center">わんわん！</td>
</tr>
<tr>
<td><img src="img/zoo-small04.jpg" width="150" height="106" alt="動物写真４" /></td>
<td align="center">白鳥動物園</td>
<td><img src="img/zoo-small05.jpg" width="150" height="106" alt="動物写真５" /></td>
</tr>
</table>
結果
動物写真１ 動物写真 動物写真２
ギャラリー 動物写真３ わんわん！
動物写真４ 白鳥動物園 動物写真５
解説 テーブルタグを使って、画像や文字を配置しました。
マス（セル）をうまいこと利用して思い通りの配置をしましょう。
テーブルタグをレイアウトに活用する
見本 <table cellspacing="14" style="font-size: 13px;">
<tr>
<td<img src="img/zoo-small01.jpg" width="150" height="106" alt="動物写真１" /></td>
<td><img src="img/zoo-small02.jpg" width="150" height="106" alt="動物写真２" /></td>
<td><img src="img/zoo-small03.jpg" width="150" height="106" alt="動物写真３" /></td>
</tr>
<tr>
<td width="150">当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。</td>
<td width="150">当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。</td>
<td width="150">当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。</td>
</tr>
</table>
結果
動物写真１ 動物写真２ 動物写真３
当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。 当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。 当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。
解説 画像を横一列に並べて、その下に紹介文を掲載しました。
テーブル全体にCSS（スタイルシート）で 文字サイズ を指定しています。
テーブルタグをレイアウトに活用する
見本 <table cellspacing="10" width="580">
<tr>
<td>
<img src="img/zoo-small01.jpg" width="150" height="106" alt="動物写真１"><br>
<img src="img/zoo-small02.jpg" width="150" height="106" alt="動物写真２"><br>
<img src="img/zoo-small03.jpg" width="150" height="106" alt="動物写真３">
</td>
</tr>
<tr>
<p>
<strong>■テーブルレイアウトの説明文</strong><br>
テーブルタグは何にでも使える万能性のあるタグです。こちらのようにホームページのレイアウトの基盤として使うこともできます。テーブルタグの中にさらにテーブルタグを書くなど、入れ子のように使うこともできるので様々な表現が可能です。テーブルの横幅や縦幅の指定をすることで、お好みの配置をすることができます。
</p>
<strong>■ホームページの紹介文</strong><br>
ご利用ありがとうございます！無料ホームページテンプレートの素材屋です。 当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。無料で使えますので利用規約をよく読んだ上でご自由にご使用下さい。できるだけお客様に喜んでもらえるサイトを目指しております。
</td>
</tr>
</table>
結果
動物写真１
動物写真２
動物写真３

■テーブルレイアウトの説明文
テーブルタグは何にでも使える万能性のあるタグです。こちらのようにホームページのレイアウトの基盤として使うこともできます。テーブルタグの中にさらにテーブルタグを書くなど、入れ子のように使うこともできるので様々な表現が可能です。テーブルの横幅や縦幅の指定をすることで、お好みの配置をすることができます。

■ホームページの紹介文
ご利用ありがとうございます！無料ホームページテンプレートの素材屋です。 当サイトでは、HPのテンプレート素材や、タグ素材、画像素材など、ホームページに関連する素材を幅広く用意しております。無料で使えますので利用規約をよく読んだ上でご自由にご使用下さい。できるだけお客様に喜んでもらえるサイトを目指しております。
解説 テーブルを左右に分けて、左側に画像、右側に文章を配置しました。


≪ テーブルタグの説明３ 【 HOME 】 分割フレームタグ <frame> ≫
練習用書き込みフォーム（サンプル表示）


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材ＮＡＶＩ 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材Ｒ Webランキング
web サイトの説明 素材使用方法 質問集/用語集 作成練習場 HTML/CSS カラー見本