きまぐれAWA's Life

アクセスカウンタ

zoom RSS テーブルタグ〜応用編:ウェブリでのテーブルデザインについて

<<   作成日時 : 2012/02/19 16:28   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

なかなか使い勝手の悪いウェブリでのテーブルタグ続編です(気まずい)
今回はセルを枠線で仕切ったり文字装飾をしたりと、ウェブリの記事内でのテーブルデザインについて記述します。



※ この記事はウェブリの記事にテーブルを組むために特化したテーブルタグ編集をしています。
※ デザイン指定はCSSでも行えますが、この記事ではタグに直接書き込む方法のみ記述します。
※ ウェブリの記事内でのテーブルを組みかたや注意点について書いた記事があります。
※ こちらの記事を読む前にそちらの記事を先にご覧ください。
(ほし)テーブルタグでウェブリの記事に表を書く〜基礎編
(ほし)テーブルタグ 〜 応用編:セルの結合【colspanとrowspan】


テーブルに枠線を付ける


ブログの性質上、記事ごとに表のパターンが異なるコトが多いと思います。
タグにクラス値あててCSSでデザイン指定をする方法もありますが、記事毎のバリエーションを考慮してテーブルのタグ内に直接デザイン指定を書き込む方法で話を進めます。

では早速にウェブリ記事用のデザイン指定のサンプルを記述します。


ニ段組み(横方向にセルを2個作成、一段目見出し、ニ段目セル)
■HTML構造例(コピペ不可)

<table bgcolor="#000000" cellspacing="1" cellpadding="5">
  <tr
bgcolor="#cccccc">
    <th>
見出し1A</td>
    <th>
見出し1B</td>
  </tr>
  <tr
bgcolor="#ffffff">
    <td>
セル1A</td>
    <td>
セル1B</td>
  </tr>
</table>


■書き込み用タグ(コピペ可)

<table bgcolor="#000000" cellspacing="1" cellpadding="5"><tr bgcolor="#cccccc"><th>見出し1A
</th><th>見出し1B
</th></tr><tr bgcolor="#ffffff"><td>セル1A
</td><td>セル1B
</td></tr></table>

■テーブル表示

見出し1A
見出し1B
セル1A
セル1B

※参考:デザイン指定なし

見出し1A
見出し1B
セル1A
セル1B



スタイル指定を書き込んだことによりテーブルタグが複雑になってしまいましたが、出来上がった表の見た目はボーダーのみの場合よりかなり良くなったと思います。
本来ならセル単体にそれぞれ枠線のスタイル指定をするところですが、簡略化するために以下のようなスタイル指定をしています。

・テーブル全体の背景を任意の色で塗りつぶす
・セル同士の余白を設ける
・セルの背景を任意の色で塗りつぶす


この3つを組み合わせることで枠線が表示されるようになります。

指定方法の詳細ですが、まず<table>タグの中にテーブル全体の背景色とセル同士の余白を指定。

<table bgcolor="#000000" cellspacing="1" cellpadding="5">

タグ内の『bgcolor="#000000"』でテーブル全体の背景を黒(※サンプル #000000)で塗りつぶします。
ここで背景に指定した色が枠線の色になります。

そして『cellspacing="1"』でセル同士の余白の指定を(※ サンプル余白は1px)をします。
ここの数値を大きくすると枠線の太さが太くなり、「0」にすると枠線はなくなります。

※『cellpadding="5"』は枠線には関係ないデザイン指定ですけど付けておくといいかも。
※デザイン効果は後で記述します。


次に、セルの背景色の指定です。
セルに背景色をつけることでセル部分のテーブルの背景色が隠れます。
そしてセル同士の余白の部分の色が浮かび上がり枠線になるという仕組みです。

セルに背景色を指定する方法ですが、<tr>タグにデザイン指定をすると行単位で一括指定が出来ます。
これを利用して見出しの部分であれば『<tr bgcolor="#cccccc">』という記述をすればOKです。

また個別に色指定をしたい場合は<th>タグや<td>タグに同じように『bgcolor=""』を挿入します。
【例】
■見出し
<th bgcolor="#cccccc"> →『bgcolor="#cccccc"』で背景色に薄い灰色を指定

■セル
<td bgcolor="#ffffff"> →『bgcolor="#ffffff"』で背景色に白色を指定

これで表に枠線を表示する事が出来るようになります。
あとはお好みで枠線の色や背景色を使い分ければ表デザインのバリエーションが増えます。
※色は6桁のカラーコード(RGBの16進数)で指定すること。

テーブルのデザイン指定の応用


これまでの説明では表に枠線をつけるための必要最低限のデザイン指定の方法でした。
応用編として覚えておくと便利そうな他のデザイン指定の方法も書いておきます。

● セル内の文字の周りに余白を指定する

cellpadding="8"

※ 書き込むタグ:<table>
※サンプルは8px、「8」は任意の数値

● セルの幅を指定する

width="300"

 ※書き込むタグ:<th>、<td>
 ※サンプルの300px,200px,100px、各数値は任意の数値

● セルの高さを指定する

height="100"

※書き込むタグ:<tr><th>、<td>
※サンプルは100px、「100」は任意の数値

● セル内の文字配置、横方向に左寄せ、中央揃え、右寄せに表示する

・左寄せ:align="left" ※初期値
・中央揃え:align="center"
・右寄せ:align="right"

※書き込むタグ:<tr><th>、<td>
※初期値は左寄せ、「align="left"」の記述は必要ありません。
※<tr>に指定すると横一列全てを一括で指定出来ます

● セル内の文字配置、縦方向に上付き、中央揃え、下付きで表示する
・上付き:valign="top"
・中央揃え:valign="middle" ※初期値
・下付き:valign="bottom"

※書き込むタグ:<tr><th>、<td>
※初期値は中央揃え、「valign="middle"」の記述は必要ありません。
※<tr>に指定すると横一列全てを一括で指定出来ます

サンプル
■HTML構造例(コピペ不可)

<table bgcolor="#000000" cellspacing="1" cellpadding="8">
  <tr
bgcolor="#cccccc">
    <th>
見出し1A</th>
    <th>
見出し1B</td>
    <th>
見出し1C</th>
  </tr>
  <tr
bgcolor="#ffffff">
    <td
width="300">セルの幅を300pxに指定</td>
    <td
width="200">200pxに指定</td>
    <td
width="100">100pxに指定</td>
  </tr>
  <tr
bgcolor="#ffffff">
    <td 
height="100">セルの高さを100pxに指定</td>
    <td>
指定セルに追従</td>
    <td>
指定セルに追従</td>
  </tr>
  <tr
bgcolor="#ffffff">
    <td>
左寄せ ※指定なし</td>
    <td
align="center">中央揃え</td>
    <td
align="right">右寄せ</td>
  </tr>
  <tr
bgcolor="#ffffff" height="100">
    <td
valign="top">文字をセルの上付きで表示<br />高さは<tr>に一括100px指定</td>
    <td>
中央に表示 ※指定なし</td>
    <td
valign="bottom">下付きで表示</td>
  </tr>
</table>


■書き込み用タグ(コピペ可)

<table bgcolor="#000000" cellspacing="1" cellpadding="8"><tr bgcolor="#cccccc"><th>見出し1A
</th><th>見出し1B
</th><th>見出し1C
</th></tr><tr bgcolor="#ffffff"><td width="300">セルの幅を300pxに指定
</td><td width="200">200pxに指定
</td><td width="100">100pxに指定
</td></tr><tr bgcolor="#ffffff"><td height="100">セルの高さを100pxに指定
</td><td>指定セルに追従
</td><td>指定セルに追従
</td></tr><tr bgcolor="#ffffff"><td>左寄せ ※指定なし
</td><td align="center">中央揃え
</td><td align="right">右寄せ
</td></tr><tr bgcolor="#ffffff" height="100"><td valign="top">文字をセルの上付きで表示
高さは<tr>に一括100px指定
</td><td>中央に表示 ※指定なし
</td><td valign="bottom">下付きで表示
</td></tr></table>

■テーブル表示

見出し1A
見出し1B
見出し1C
セルの幅を300pxに指定
200pxに指定
100pxに指定
セルの高さを100pxに指定
指定セルに追従
指定セルに追従
左寄せ ※指定なし
中央揃え
右寄せ
文字をセルの上付きで表示
※高さは<tr>に一括100px指定
中央に表示 ※指定なし
下付きで表示





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

|ω・)ノシ See you♪

|彡 サッ



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





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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

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

* ぱにゃステ *

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

テーブルタグ〜応用編:ウェブリでのテーブルデザインについて きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる