全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.20
テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・応用編
前回は、レーシングフラッグのような模様をつくってみました。
今回は、前々回の「テーブル1」と前回の「テーブル2」を合体させてみます。
それぞれのパーツは、こんな感じです。
テーブル１
文字が入りました。
おお、本当だ！！
キレイでしょ。
うんうん、こりゃいいね。
入力ソース
テーブル２
入力ソース
では、いよいよ合体です。
「テーブル2」「テーブル1」「テーブル2」の順番で合体させてみましょう！！
やり方は、これらのテーブルをもっと大きなテーブルで囲んでしまいます。
つまり・・・
となります。
注：「 border="0" cellspacing="0" cellpadding="0" 」を
1番外側のテーブルに設定するのがポイント！！
実際にやってみると・・・
このように合体しました！！
ちなみにテーブル1・テーブル2それぞれの「table」の「bordercolor="～"」と「bgcolor="～"」に
「#ffffff」をいれると・・・
次回は、話題を変えて、スタイルシートの入門編をやります。
前回は、レーシングフラッグのような模様をつくってみました。
今回は、前々回の「テーブル1」と前回の「テーブル2」を合体させてみます。
それぞれのパーツは、こんな感じです。
テーブル１
文字が入りました。
おお、本当だ！！
キレイでしょ。
うんうん、こりゃいいね。
入力ソース
<table width="300" border="1" cellspacing="0" cellpadding="6" bordercolor="#009900">
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
</table>
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1" color="#993300">～</font> </td></tr>
</table>
テーブル２
入力ソース
<table width="300" bgcolor="009900" border="1" bordercolor="#009900" cellspacing="0" cellpadding="0">
<tr height="20" ><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td></tr>
<tr height="20" ><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td&t;<td bgcolor="#ccffcc" width="25%"></td></tr>
</table>
<tr height="20" ><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td></tr>
<tr height="20" ><td bgcolor="#ffffcc" width="25%"></td><td bgcolor="#ccffcc" width="25%"></td><td bgcolor="#ffffcc" width="25%"></td&t;<td bgcolor="#ccffcc" width="25%"></td></tr>
</table>
では、いよいよ合体です。
「テーブル2」「テーブル1」「テーブル2」の順番で合体させてみましょう！！
やり方は、これらのテーブルをもっと大きなテーブルで囲んでしまいます。
つまり・・・
<table border="0" cellspacing="0" cellpadding="0"
>
<tr><td>テーブル2</td></tr>
<tr><td>テーブル1>/td></tr>
<tr><td>テーブル2</td></tr>
</table>
<tr><td>テーブル2</td></tr>
<tr><td>テーブル1>/td></tr>
<tr><td>テーブル2</td></tr>
</table>
となります。
注：「 border="0" cellspacing="0" cellpadding="0" 」を
1番外側のテーブルに設定するのがポイント！！
実際にやってみると・・・
| 文字が入りました。 |
|---|
| おお、本当だ！！ |
| キレイでしょ。 |
| うんうん、こりゃいいね。 |
| * | * | * | * |
| * | * | * | * |
このように合体しました！！
ちなみにテーブル1・テーブル2それぞれの「table」の「bordercolor="～"」と「bgcolor="～"」に
「#ffffff」をいれると・・・
| 文字が入りました。 |
|---|
| おお、本当だ！！ |
| キレイでしょ。 |
| うんうん、こりゃいいね。 |
| * | * | * | * |
| * | * | * | * |
次回は、話題を変えて、スタイルシートの入門編をやります。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 08:40:39
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
