上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
とてもシンプルな作表の方法をご紹介します。
まずは例を挙げてみますよ。
<table border="1"cellspacing="0"bordercolor="#666666">
<tr><td>1マスできました。</td></tr>
</table>
↓↓↓こうなります。
1マスできました。

シンプルな囲いですので表というよりも、記事の一部を強調したり
するのに使えそうです。
表っぽくするなら横にもう1マスつなげて…
<table border="1"cellspacing="0"bordercolor="#666666">
<tr><td>1行目A</td><td>1行目B</td></tr>
</table>
↓↓↓こうなります。
1行目A1行目B


赤文字部分がテーブルタグ。作表のタグです。
基本は<table>○○</table>ですが、
cellspacing="0" によって枠幅をなくし、
bordercolor="#666666" によって色をつけてみました。
色のコードはFC2であれば記事を書く際のアイコンから参照できます。
cellspacing="0"を省いた場合は外枠に幅ができます。
↓↓
1行目A1行目B

ちなみに border="1" の数字を変えてみると・・・
border="5"
1行目A1行目B
border="9"
1行目A1行目B

いろいろ遊べそうです(^^)


そして


緑の部分が横一行を表す部分です。
<td>○○</td> でセルを定義します。
<tr>△△</tr> で横一行を定義します。
つまり、<tr>△△</tr>の△△部分にセルを表す<td>○○</td>を連ね
ていけばいいわけです。
最初に挙げた例では一行にセルが2個入っています。
この行を積み重ねてゆくと
<table border="1"cellspacing="0"bordercolor="#666666">
<tr><td>1行目A</td><td>1行目B</td></tr>
<tr><td>2行目A</td><td>2行目B</td></tr>

</table>
1行目A1行目B
2行目A2行目B


これで応用ができますね。

このやり方の便利な点は表の幅を指定しないために、長い文章や画像等
を入れても表が勝手に伸び縮みしてくれるというところです。
1行目A 枠が自動的に伸びてくれます。
2行目A 2行目B

いちいち調節しなくて済むのでラクですよ!



ランキング応援して下さると嬉しいです。
お時間のある方は左ランキング欄も押していって下さると
もっともっとウレシイ!

  fc2rank

~PR~
スポンサーサイト
記事中で表を使うととても見やすく、良い印象を与える場合があります。
ここでは基本的な表をちょっとだけ進化させたものを紹介します。
その前に鱗がよく参考にしているサイトが HTMLクイックリファレンス様。
ABC順と目的別で使いたいHTMLタグの説明や使用例が分かりやすく記載されています。
通常は文字化けしてしまうような特殊文字の記入法も一覧になっていてとても便利です。
ここでの説明に不足や分かりづらさがあった時はそちらもご覧になって下さいね。
それでは少々長くなりますがお付き合い下さい(^^;

一例としてこんな表を作ってみました。

お薦めアフィリエイト
A8ネット
アフィリエイトEasy
リーフィ
各社の特徴を比べながら 一番お得で自分にあった方法を選択していこう!
大手アフィリといえばコレ。
ニューフェイス!
クリック課金も◎。
紹介650円。
頑張ってます。

この表のソースが以下のようになります。
ソースの下に色別の説明があります。

<table border="1" width="400" cellspacing="0" cellpadding="5"
bordercolor="#333333">

<caption><strong><span style=font-size:large>
お薦めアフィリエイト</span></strong></caption>

<tr>
<th bgcolor="#FFFFFF"><font color="#333333">
<center>A8ネット</center></font></th>
<th bgcolor="#FFFFFF" width="150"><font color="#333333">
<center>アフィリエイトEasy</center></font></th>
<th bgcolor="#FFFFFF" width="150"><font color="#333333">
<center>リーフィ<center></font></th>
</tr>

<tfoot>
<tr>
<td colspan="3" bgcolor="#FFFFFF" align="left">各社の特徴を比べながら
一番お得で自分にあった方法を選択していこう!</td>
</tr>
</tfoot>

<tr>
<td bgcolor="#FFFFFF" align="right" nowrap>
<center>バナー</center></td>
<td bgcolor="#FFFFFF" valign="top" width="150">
<center>バナー</center></td>
<td bgcolor="#FFFFFF" valign="top" width="150">
<center>バナー</center></td>
</tr>

<tr>
<td bgcolor="#FFFFFF" align="right" nowrap>
<center>大手アフィリといえばコレ。</center></td>
<td bgcolor="#FFFFFF" valign="top" width="150">
<center>ニューフェイス!<br>クリック課金も◎。</center></td>
<td bgcolor="#FFFFFF" valign="top" width="150">
<center>紹介650円。<br>頑張ってます。</center></td>
</tr>

</table>

最上部・最下部の青い部分が<table>(テーブル)タグ。
作表するためのタグです。

width="300"が幅ですのでいろいろ変えて見て下さい。
ここで枠の色※1指定も行っています。
次のオレンジ部分が表のタイトル
先頭の<table>の後にひとつだけ記入してください。
緑部分が表の横1行目。 幅の他に色※1を指定し、 中央揃え※2しています。
赤部分が2行目。見づらくなるのでバナーのURLは省いてあります。
ここにも中央揃え※2をしてあります。
茶色部分が3行目。中央揃え※2
ピンクの部分が4行目、1行ブチ抜きです。
4行目の<tfoot>タグ※3 は書く位置が表の順番とは異なりますが
こういうHTMLの定義であるようです。

・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
※1
<font color="#000000">○○</font>で色を指定します。
ちなみに#000000は黒です。
FC2の場合は記事を書く際使用できるアイコンの中に"色の選択"があり、
色番号も参照できます。
※2
<center>○○</center>で文章やイラストを中央に寄せます。
※3
<tfoot>○○</tfoot>は表のフッター(下)部を表します。
表の1行目(ヘッダー(頭)部)の次に書きますが、このソース(作表のHTML)を
コピーして使う場合、1行ブチ抜き欄が必要なければ消去しても大丈夫です。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・

このように横1行をどんどん重ねていく形で表が作れます。
もっと細かいことを知りたい方は HTMLクイックリファレンス様を参照して下さい。
あくまで、私はこれで表ができたという例ですので、上手くいかない方は
質問掲示板やFAQ・HTML関連のサイト等を総動員して頑張って下さいね。

そして作表時の危険なワナ(笑)
記事中に空白ができてしまったら・・・。
FC2の場合ですが、新しく記事を書くページの設定部分、テキストフォーマットを
"HTMLのみ"としてしまいましょう。
文章も改行されなくなってしまいますが、そこは<br>を入れて調節。
これでかなりイイ感じの見やすい記事が書けるはず~!!

ここは違うよ、とか見づらいよ、等の意見がありましたらコメント下さいね。




ランキング応援して下さると嬉しいです。
お時間のある方は左ランキング欄も押していって下さるともっともっとウレシイ!

  fc2rank

~PR~
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。