きまぐれAWA's Life

アクセスカウンタ

zoom RSS テーブルタグ 〜 応用編:セルの結合【colspanとrowspan】

<<   作成日時 : 2011/08/02 04:35   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 11 / トラックバック 0 / コメント 10

今回はテーブルタグでウェブリの記事に表を作る応用編、セルの結合について(にや)


テーブルタグでは表のセルを結合することできます。
セルの結合は<td>や<th>のタグに以下の文字列を書き込んで行います。

 横方向にセルを結合 → colspan="結合するセルの数"
 縦方向にセルを結合 → rowspan="結合するセルの数"


これを踏まえて(まじ)
セルの数が横×3個、縦×3個の表を基本にいくつかパターンを記述しておきます(ん)

■ HTML記述例

<table border="1">
  <tr>
    <td>セル 1A</td>
    <td>セル 1B</td>
    <td>セル 1C</td>
  </tr>
  <tr>
    <td>セル 2A</td>
    <td>セル 2B</td>
    <td>セル 2C</td>
  </tr>
  <tr>
    <td>セル 3A</td>
    <td>セル 3B</td>
    <td>セル 3C</td>
  </tr>
</table>
■ テーブル表示

セル 1A
セル 1B
セル 1C
セル 2A
セル 2B
セル 2C
セル 3A
セル 3B
セル 3C



※テーブルを作成する時は一段目のセルの数と2段目以降のセルの数は同じ数なるようにします。
※例えば一段目のセルの数が3つなら、ニ段目も三段目もセルの数は3つです。
※セルの数が違うと表のレイアウトが崩れます。
※セルの結合を行った場合はこの限りではありません。




横方向にセルを結合 【 colspan="結合するセルの数"】


一段目1A+1B+1C(3個結合)
二段目2A+2B、三段目3B+3C(2個結合)
■ HTML記述例(一般)

<table border="1">
  <tr>
    <td colspan="3">セル1A+1B+1C</td>
  </tr>
  <tr>
    <td>セル 2A</td>
    <td>セル 2B</td>
    <td>セル 2C</td>
  </tr>
  <tr>
    <td>セル 3A</td>
    <td>セル 3B</td>
    <td>セル 3C</td>
  </tr>
</table>
■ HTML記述例(一般)

<table border="1">
  <tr>
    <td>セル 1A</td>
    <td>セル 1B</td>
    <td>セル 1C</td>
  </tr>
  <tr>
    <td colspan="2">セル 2A+2B</td>
    <td>セル 2C</td>
  </tr>
  <tr>
    <td>セル 3A</td>
    <td colspan="2">セル 3B+3C</td>
  </tr>
</table>
■ウェブリ記事用書き込みタグ

<table border="1"><tr><td colspan="3">セル1A+1B+1C
</td></tr><tr><td>セル 2A
</td><td>セル 2B
</td><td>セル 2C
</td></tr><tr><td>セル 3A
</td><td>セル 3B
</td><td>セル 3C
</td></tr></table>
■ウェブリ記事用書き込みタグ

<table border="1"><tr><td>セル 1A
</td><td>セル 1B
</td><td>セル 1C
</td></tr><tr><td colspan="2">2A+2B
</td><td>セル 2C
</td></tr><tr><td>セル 3A
</td><td colspan="2">セル 3B+3C
</td></tr></table>
■テーブル表示

セル1A+1B+1C
セル 2A
セル 2B
セル 2C
セル 3A
セル 3B
セル 3C

■テーブル表示

セル 1A
セル 1B
セル 1C
セル 2A+2B
セル 2C
セル 3A
セル 3B+3C




縦方向にセルを結合 【 rowspan="結合するセルの数" 】


一列目 1A+2A+3A (3個結合)
二列目1B+2B、三列目2C+3C(2個結合)
■ HTML記述例(一般)

<table border="1">
  <tr>
    <td rowspan="3">セル1A+2A+3A</td>
    <td>セル 1B</td>
    <td>セル 1C</td>
  </tr>
  <tr>
    <td>セル 2B</td>
    <td>セル 2C</td>
  </tr>
  <tr>
    <td>セル 3B</td>
    <td>セル 3C</td>
  </tr>
</table>
■ HTML記述例(一般)

<table border="1">
  <tr>
    <td>セル 1A</td>
    <td rowspan="2">セル 1B+2B</td>
    <td>セル 1C</td>
  </tr>
  <tr>
    <td>セル 2A</td>
    <td rowspan="2">セル 2C+3C</td>
  </tr>
  <tr>
    <td>セル 3A</td>
    <td>セル 3B</td>
  </tr>
</table>
■ウェブリ記事用書き込みタグ

<table border="1"><tr><td rowspan="3">セル 1A+2A+3A
</td><td>セル 1B
</td><td>セル 1C
</td></tr><tr><td>セル 2B
</td><td>セル 2C
</td></tr><tr><td>セル 3B
</td><td>セル 3C
</td></tr></table>
■ウェブリ記事用書き込みタグ

<table border="1"><tr><td>セル 1A
</td><td rowspan="2">セル 1B+2B
</td><td>セル 1C
</td></tr><tr><td>セル 2A
</td><td rowspan="2">セル 2C+3C
</td></tr><tr><td>セル 3A
</td><td>セル 3B
</td></tr></table>
■テーブル表示

セル1A+2A+3A
セル 1B
セル 1C
セル 2B
セル 2C
セル 3B
セル 3C

■テーブル表示

セル 1A
セル 1B+2B
セル 1C
セル 2A
セル 2C+3C
セル 3A
セル 3B




縦横同時にセルを結合 【 colspan & rowspan 】


横方向に2個、縦方向に2個のセルを同時に結合 一段目1A+1B+ニ段目2A+2B
■ HTML記述例(一般)

<table border="1">
  <tr>
    <td colspan="2" rowspan="2">セル 1A+1B+2A+2B</td>
    <td>セル 1C</td>
  </tr>
  <tr>
    <td>セル 2C</td>
  </tr>
  <tr>
    <td>セル 3A</td>
    <td>セル 3B</td>
    <td>セル 3C</td>
  </tr>
</table>

■ウェブリ記事用書き込みタグ

<table border="1"><tr><td colspan="2" rowspan="2">セル 1A+1B+2A+2B
</td><td>セル 1C
</td></tr><tr><td>セル 2C
</td></tr><tr><td>セル 3A
</td><td>セル 3B
</td><td>セル 3C
</td></tr></table>
■テーブル表示

セル 1A+1B+2A+2B
セル 1C
セル 2C
セル 3A
セル 3B
セル 3C







セルの結合を使うと表のレイアウトなどデザインの幅が広がります(にや)
横方向の結合『colspan』は結合した数だけセルを減らすだけなので簡単ですが、
縦方向の結合『 rowspan』は上下左右のセルの位置関係をしっかり把握しないといけません。
位置関係を間違えやすいので注意してください。

テーブルタグで作る表のレイアウト的なものは基礎編とこの応用編でだいたいOKかと思います。
あとは背景色や枠線等のデザイン的なことや文字や画像の配置的なども考えたいトコロです。
これらはまたまた次の機会に(ん)

なんとなく書き始めてしまい引込みがつかなくなったテーブルタグのお話でした(笑)



それでは今回はこのくらいで(にや)

|ω・)ノシ See you♪

|彡 サッ



【関連記事リンク】
(ほし)テーブルタグでウェブリの記事に表を書く〜基礎編
(ほし)テーブルタグ〜応用編:ウェブリでのテーブルデザインについて
(ほし)テーブルタグ〜応用編:エクセルを使って簡単にテーブルタグを組む方法





■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 11
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた
ナイス ナイス ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(10件)

内 容 ニックネーム/日時
お久しぶりです(ひょえ)(@ひょえ)
なんか頭がこんぐらがって(あれ)きそうなタグが並んでいますねぇ(気まずい)

タイトル文字を下へ持って行きたいのですが、どこをどう弄ればいいか教えて欲しくてお邪魔しました。
ウロウロしたんですけど、どこにあるのか分からなくて‥‥
済みませんがよろしくお願いします(はーと)
はいじ
2011/08/02 11:19
はいじさん、いらっしゃいませ(ん)
お久しぶりです〜(にこ)ノ
こんがらがって来そうというか、書いてる本人こんがらがりながら記事書きました(笑)
タグ内の改行の影響がなければもう少しスマートに書けるんですけどねぇ(しょぼ)

さて、タイトルの文字位置の変更はトップページと記事ページで2つに分けて書いてありますのでご参考に(`・ω・´)ゞデシ!!

■トップページ
http://mairis.at.webry.info/200802/article_30.html
■記事ページ
http://mairis.at.webry.info/200802/article_45.html
mairis
2011/08/02 12:39
えへへ(にこ)
ありがとうございます(やるお)
これでいいですか?
まだ"変更表示されてないんですけど‥‥

/* タイトル領域内のアンカー */
#banner a{
color:#f43d99;
}

/* タイトルテキスト */
#banner h1{
position:relative; top:12px; left:12px;
/* タイトル領域内での位置を指定します */
font-size:large
}

もう一つあるんですけど、タイトルバナーと記事の間が一部文書を削除したら真っ白になってしまったんですけ何故でしょう?
はいじ
2011/08/02 13:41
>> はいじさん
そんな感じでOKかと思います(ん)
お好みな位置になるように数値をいじってみてください。

それからプロフィール領域はすっきりデザインの指定がしてありますね。
プロフィールに書く文章を<div style="visibility:visible;">〜</div>のタグで括って括ってみてください。
こちらはこの記事で紹介したデザイン指定になります(にや)
■CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪ 【その2】
http://mairis.at.webry.info/201003/article_37.html
mairis
2011/08/02 18:35
プロフィール領域は以前mairisさんに教えてもらいながらしました(わら)
<div〜>のなにかを消してしまったのは気が付いたんですけど何を消してしまったのか分からずにいました(@うえ)
表示出来ました(でんき)
でもぉ、“はいじ”アイコンの上に何故スペースが出来ているのかなぁ(あれ)
あとタイトル文字をプレートの一番下にもっていきたいんだけど、どう数字を変えても移動しないのは何故かなぁ(@あれ)
明日になったら変わってる‥‥かな(こなた)

ウルサイヤツで済みません(なみだ)
はいじ
2011/08/02 22:36
>> はいじさん
>アイコンの上に何故スペース
頭のタグをこちらに変更すると上部スペースがなくなります。

<div style="visibility:visible; margin-top:-1.3em" >

>タイトル文字
プレートは写真のところですよね?
上から90pxで指定するとだいたいいいところに行きそうな気がします。

position:relative; top:90px; left:50px;
mairis
2011/08/03 00:15
おはようございます(おんぷ)
変更してみました!
すぐに変更できないみたいなので少し待ってみます(ん)
ありがとうございました(わぁ)
はいじ
2011/08/03 06:34
>> はいじさん
1行目を『<div 〜><img …』と改行しないで続けて書いて見て下さい。
それで上部の空白は無くなると思います。
mairis
2011/08/03 09:19
ありがとうございます(拍手)
スッキリしました(ほし)
タグって難しいですねぇ(@ひょえ)
はいじ
2011/08/03 21:50
>> はいじさん
お返事遅くなりました┌◯ ペコッ

お疲れ様でした(たいよう)
タグとかいろいろ悩ましいこともありますよね(あらやだ)
何はともあれすっきりできてよかったです。
また何かありましたらお気軽にお寄りください〜☆
mairis
2011/08/14 16:38

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

テーブルタグ 〜 応用編:セルの結合【colspanとrowspan】  きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる