ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 表をつくる(1)基本

表をつくる(1)基本

ブログの記事の中に表や表まで行かなくても、四角く囲った中に文字を書きたいなと思ったことはないですか?上手に使うことで見やすく、引き締まった感じの記事が作れると思います。

表を作るにはテーブルタグというものを使います。

テーブルタグを使う時の注意点

まず最初に注意点です。このテーブルタグを使って普通に記事を書いて保存すると、出来上がりを確認したらたくさんの改行によって、下に長く伸びた崩れた記事になってしまいます。
なので、記事を作った最後に保存のボタンの2つ上にある設定のテキストフォーマットを「HTMLタグのみ」に変える必要があります。

でもそうすると今度は自動改行がされないので、文章のところがいつもみたいに勝手に改行されず、ギュウギュウ詰めになります。
なので自分で改行のタグを入れる必要があります。改行タグは<br>です。

改行するたびに<br>を入れるのはめんどくさい人は、文章を書く初めと終わりに<pre>~</pre>を入れるといつもと同じような感じで記事を作る事ができます。
これは、書いた通りそのままに表示するタグです。いつもの様に改行したら改行されます。ただ、今度は逆にある程度の文章の長さで自分で改行しないと、そのまま表示されてしまうのでカラムを壊してまで横に長い文章になってしまいます。

200816 554 15
このように普通なら枠の端まで行ったら、次の行から始まりますがそのまま表示なのでどこまでもそのままです。自分に使いやすい方を使ってください。

テーブルタグの紹介

やっと本題のテーブルタグの説明です。例をあげて説明していきます。

基本のテーブルタグです

<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>

<tr>~</tr>と<td>~</td>によって枠を作ります。

横に増やす 横に増やす 横に増やす

<table border>
<tr>
<td>横に増やす</td>
<td>横に増やす</td>
<td>横に増やす</td>
</tr>
</table>

<td>~</td>を増やせば横に枠が増えていきます。

縦に増やす
縦に増やす
縦に増やす

<table border>
<tr>
<td>縦に増やす</td>
</tr>
<tr>
<td>縦に増やす</td>
</tr>
<tr>
<td>縦に増やす</td>
</tr>
</table>

縦に増やしたい時は、<tr>~</tr>と<td>~</td>のセットを増やします。

縦と横に増やす 縦と横に増やす 縦と横に増やす
縦と横に増やす 縦と横に増やす 縦と横に増やす
縦と横に増やす 縦と横に増やす 縦と横に増やす

<table border>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
<tr>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
<td>縦と横に増やす</td>
</tr>
</table>

二つを組み合わせるとこの様に表が出来上がります。簡単ですよね。
ちなみにこの様に、ブログの真ん中に表を持って来たい人は、
table borderの後ろに align="center"を入力すると真ん中に表示されます。

でもこれだけではあまりに質素で寂しいから、次回は引き続き「表の飾り方」を紹介します。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
はじめましてm(_ _ )m
 最近ブログを始めて、表作りに挑戦したのですが表と文章の間に大きな空白ができたり表が崩れたりと混乱してた時にちょうどこのサイトを見つけました。初心者な自分に取っては簡単な事でも分からないことが多いので非常に参考になりました(´ω`*)今後も参考にしたいと思いますのでよろしくお願いしますm(_ _ )mデハ
はじめまして
南方さんのブログを見させてもらいましたが、すっごく見やすいですね。
テーブルタグも表の一部だけ色をつけたりなど、わかりやすいと思います。

なにかわからない事などがありましたら、また参考にしてやって下さい。
こちらこそよろしくお願いします。
はじめまして
るんばばさん はじめまして。最近ブログを始めました。思いつき、手探り状態で始めたのですが、こんなので良いのかなと疑心暗鬼になってきています。るんばばさんの所でもう一度じっくり勉強させてもらおうと思っています。またご指導いただけたら幸いです。
はじめまして
bwpapaさんのブログを見させてもらいましたけど、
>こんなので良いのかなと疑心暗鬼に
全然問題ないですよ!僕も台湾料理が食べたくなりました。

僕のブログが参考になれば嬉しいです。
表の中に・・・
スクロールつきの表は設置できるのでしょうか。
虹さんへ
表の中にスクロールつきの表は設置できると思いますよ。
教えてください!
はじめまして。ブログをはじめて一年、最近、テンプレートをカスタマイズするのが楽しくなってきた初中級のブロガーです。
さきほど、はじめてブログ記事に表を入れようとしたところ、まさにたくさんの改行により、間延びした記事になってしまい、どうしたらいいんだろう・・・と途方にくれてネットで検索していたら、ここへたどりつきました。

記事を読んでテキストフォーマットを「HTMLタグのみ」に変えないといけないというのはわかりましたが、自分が使っているのJUGEMでは、そういう設定ボタンがありません。
つまり自分で何かHTMLやCSSに同様のコマンドを書かなければいけないと思うのですが、それはどうやったらいいのかわかりません。もし、説明が簡単でしたら、教えていただけないでしょうか?
かずぴんさんへ
はじめまして。JUGEMをお使いですか。JUGEMもいいブログですよね。
「HTMLタグのみ」がない場合はテーブルタグを改行させずに続けて書けば、たくさんの改行により、間延びした記事にならないと思いますよ。

<table border><tr><td>基本のテーブルタグです</td></tr></table>

この記事の一番上のタグの例だとこんな感じですね!
ありがとうございます
FC2ブログに他のブログの質問を書いてしまったなんてごめんなさい。
それなのにご親切に教えていただいてありがとうございました。

よく調べたらJUGEMにも掲示板みたいなものがあって、テーブル作成のときの空白の削除の仕方が書いてありました。
FC2ブログさんでいうところの「HTMLタグのみ」という設定ボタンと同じ役目をする「自動改行を無効」という設定があり、それをしたら解決できました。

しかし、できたらできたで欲が出て、改行コマンドをいれてあげないと、だらだら文章になってしまうのは長い記事のときは不便!

それで、教えていただいたようにテーブルタグを改行しないで書いたら、無駄な空白がなくなり、解決できました。本当にありがとうございます。
悩んだことは自分のブログにも書いて、困っている人の参考になればいいなって思います。
本当にありがとうございました(^^)
かずぴんさんへ
JUGEMブログにも「自動改行を無効」にする設定があったのですね!
すぐに解決できてよかったですね。改行コマンドはお役に立ててよかったです。
確かに長い記事のときは「自動改行を無効」は不便ですからね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/82-3af86f2e   

Template Designed by DW99