|
|
|
全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.16
テーマ：ホームページ作成の悩み(545)
カテゴリ：HTMLタグ（テーブル）
・テーブルをつかう
■ テーブルをヨコに並べる 前回は、テーブルの位置を指定する方法でした。 今回からは、テーブルをヨコに並べる方法を学んでいきましょう。 たとえば次の例を見てください。
このようにテーブルが並んでいます。 いったいどうやって並べているのでしょう。 最も簡単な方法は、一つ目のテーブルに「align="left"」を設定します。 <table border="1" bgcolor="#ffcc99" align="left"> <tr><td>●</td><td>○</td></tr></table> <table border="1" bgcolor="#ffcc99"> <tr><td>●</td><td>○</td></tr></table> こんな感じですね。これでテーブルが並びます。 ただ今回は、レイアウト力をつけるために、あえて面倒な方法をもうひとつ学びます。 それは、このテーブル自体をマス目のひとつ、 つまり、一マスに入る文字と同じように考えてしまう方法です。 ということは・・・ 「td」のなかに、このテーブル自体を入れちゃうのです。 イメージとしては <table><tr><td> ● ○ </td></tr></table> という感じに「td」のなかに入ります。 今回は
<table><tr><td>● ○</td><td>● ○</td></tr></table> というイメージになります。 これをきちんと書くとこんな感じ。
↓ <table> <tr> <td> <table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table> </td> <td> <table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table> </td> </tr> </table> 「td」のなかに「<table><tr><td>～</td></tr></table>」が まるごと入っています。 「td」を増やせば、ヨコに並べるテーブルの数もどんどん増やせます。 ちなみにこのとき、テーブルの高さがバラバラになってしまうときは、 <table><tr valign="top">のように、 「valign=""」属性を赤色部分の「tr」にいれてみましょう！！ 次回は同じようにテーブルをタテに増やしてみますよ！！ 具体的なやり方は次回に。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 07:33:00
[HTMLタグ（テーブル）] カテゴリの最新記事
|
