きまぐれAWA's Life

アクセスカウンタ

zoom RSS テーブルタグでウェブリの記事に表を書く〜基礎編

<<   作成日時 : 2011/07/30 22:36   >>

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

ウェブリの記事でテーブルタグを使って表を書く方法です(ん)


記事内に表を書きたいケースも多くあるとおもいます。
でもウェブリでは記事作成の際に自動的に改行タグが挿入されます。
テーブルで使用するタグ「<table><tr><td>」などなど、これらのタグの間で改行を入れると意図しないレイアウトが崩れが起きます。

HTMLを書く場合、改行やスペースなどを利用して管理のしやすいように書くのが基本です。
※整理の仕方や書き方はHTML作者の好みになります。
その時々で書き方は変わりますが、テーブルタグを書く時は例えばこんな感じで書いたりします。
なお、テーブル作成に使用する基本的なタグは以下のとおりです。

 <table>
:テーブルを作ります。最後は『</table>』で閉じる
 <tr>
:縦方向に列を作ります。最後は『</tr>』で閉じる
 <th>
:横方向に見出しのセル(ヘッダーセル)を作ります。最後は『</th>』で閉じる
 <td>
:横方向にセルを作ります。最後は『</td>』で閉じる
  ※<th>の見出し文字は太字で中央表示。

【HTML記述例】
<table>
  <tr>
    <th>見出し1A</th>
    <th>見出し1B</th>
  </tr>
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
  </tr>
</table>
 → テーブルスタート
 → 列の1個目スタート
 → 1列目に見出し1個目作成     
 → 1列目に見出し2個目作成
 → 列の1個目エンド
 → 列の2個目スタート
 → 2列目にセル1個目作成 
 → 2列目にセル2個目作成 
 → 列の2個目エンド
 → テーブルエンド
テーブル仕上り(希望…?)
見出し1A見出し1B
セル1Aセル1B




各タグを分類するように改行して、頭に段落っぽくスペースやTABスペースなどを使用。
こういう書き方をすることでメリハリをつけてそれぞれのタグの見分けやすくするわけです。
…が、前述したようにウェブリでは改行タグが自動挿入されますので、
これをそのまま記事に書きこむと…










見出し1A 見出し1B
セル1A セル1B
 ※わかりやすいようにテーブルにはボーダーを指定しています。

上部に意図しない空間が発生しました(あれ)
ソースを見るとテーブルタグ内で改行した数だけテーブルの前に改行タグが作成されてました。
さすがにこれは困ります。

このような空間作成を防止するにはテーブルタグ内では改行を入れず連続してタグを書くこと。
ですが、それだとどの列のどのセルに何を書いてるかわからなくなってしまいます。
上記のような簡単な構造のテーブルならいいですが、列やセルが増えるととんでもないことになります。




でっ(まじ)
ウェブリのトンデモ仕様(ウェブリだけじゃないと思いますがw)をふまえつつ、
比較的管理のしやすそうなテーブルタグの書き方をカキカキしておきます。

タグ間の改行はご法度ですが、『<th></th>』や『<td></td>』のセル内改行はOK。
これを利用しない手はありません。
セルの最後(『</th>』や『</td>』などの前)で改行をいれると見分けをつけやすいですね。

一段組み


一段組み(横方向にセルを2個作成)
一段組み(横方向にセルを3個作成)
■HTML構造例(コピペ不可)

<table border="1">
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
  </tr>
</table>
■HTML構造例(コピペ不可)

<table border="1">
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
    <td>セル1C</td>
  </tr>
</table>
■書き込み用タグ(コピペ可)

<table border="1"><tr><td>セル1A
</td><td>セル1B
</td></tr></table>
■書き込み用タグ(コピペ可)

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

セル1A
セル1B

■テーブル表示

セル1A
セル1B
セル1C




ニ段組み


ニ段組み(横方向にセルを2個作成)
ニ段組み(横方向にセルを3個作成)
■HTML構造例(コピペ不可)

<table border="1">
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
  </tr>
  <tr>
    <td>セル2A</td>
    <td>セル2B</td>
  </tr>
</table>
■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>
</table>
■書き込み用タグ(コピペ可)

<table border="1"><tr><td>セル1A
</td><td>セル1B
</td></tr><tr><td>セル2A
</td><td>セル2B
</td></tr></table>
■書き込み用タグ(コピペ可)

<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></table>
■テーブル表示

セル1A
セル1B
セル2A
セル2B

■テーブル表示

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




三段組み(一段目見出し)


三段組み(横方向にセルを2個作成)
三段組み(横方向にセルを3個作成)
■HTML構造例(コピペ不可)

<table border="1">
  <tr>
    <th>見出し1A</th>
    <th>見出し1B</th>
  </tr>
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
  </tr>
  <tr>
    <td>セル2A</td>
    <td>セル2B</td>
  </tr>
</table>
■HTML構造例(コピペ不可)

<table border="1">
  <tr>
    <th>見出し1A</th>
    <th>見出し1B</th>
    <th>見出し1C</th>
  </tr>
  <tr>
    <td>セル1A</td>
    <td>セル1B</td>
    <td>セル1C</td>
  </tr>
  <tr>
    <td>セル2A</td>
    <td>セル2B</td>
    <td>セル2C</td>
  </tr>
</table>
■書き込み用タグ(コピペ可)

<table border="1"><tr><th>見出し1A
</th><th>見出し1B
</th></tr><tr><td>セル1A
</td><td>セル1B
</td></tr><tr><td>セル2A
</td><td>セル2B
</td></tr></table>
■書き込み用タグ(コピペ可)

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

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

■テーブル表示

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







テーブルタグの基本的な形はこんな感じです(ん)
表の段数やセルの数は表記例を参考に増やしたりしてお好みの表を作成してください。

実際に背景色や枠線などのデザイン指定をしてこの記事内でもテーブルタグを使用しています。
デザインを指定したりセル同士を結合したりといろんな応用編もありますが、それは別の機会に。

でも、ぶっちゃけた話(まじ)
ウェブリの記事内でテーブルを使うのはかなりめんどくさいです(笑)
テーブルタグを使うとテキストを上手に整理して綺麗に表示することが出来ますが、
実際にはあまり使いたくないというのが本音でしょうか。

どちらかというとウェブリの記事内でのテーブルタグはあまりオススメ出来ないのが現状です。
まぁ手間暇かけるだけの価値はあるんですけどねぇ、やっぱりめんどくさ〜い。



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

|ω・)ノシ See you♪

|彡 サッ



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





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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(1件)

タイトル (本文) ブログ名/日時
ウェブリブログのテーブルをスマホでも見やすくする方法
ウェブリブログのテーブルの問題点 ウェブリブログにテーブルを表示させる際、空白が表示されるという問題があります。 ...続きを見る
Enjoy! webryblog!!
2014/01/15 23:58

トラックバック用URL help


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

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
細かい説明毎回すばらしいです(ん)

締めタグ忘れて、ビヨ〜ンってなる誰かが居そう(ぎょ)
あちょ♪
2011/08/01 18:37
あちょさん、いらっしゃいませ(ん)
何度も書こう書こうと思いつつ挫折してきたテーブルの書き方記事でしたけれど、ウェブリの助け合いの部屋でちょっと表の質問が出てたので一気に書き上げました。
実際のトコロ、ウェブリの記事でテーブル組むのはあまりオススメではないのですねぇ。
頑張れば出来ないこともないのですがとんでもなくめんどくさすぎます(^◇^;)
この記事を書いてる最中も『ビヨ〜ン』ってなりまくりでしたわよ(あらやだ)
mairis
2011/08/02 10:07

コメントする help

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

* ぱにゃステ *

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

テーブルタグでウェブリの記事に表を書く〜基礎編 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる