ＨＴＭＬで表を作ろう！その１

とてもシンプルな作表の方法をご紹介します。
まずは例を挙げてみますよ。
<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行目A

1行目B

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

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

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

1行目A	枠が自動的に伸びてくれます。
2行目A	2行目B

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



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

　　

〜PR〜