表の作り方~テーブルタグで表の形を変える方法~
今回は、表の形を変える方法の説明をします。 この辺から私もあんまり把握してないんで、勉強をかねてテーブルタグの説明をしていきます(*´∀`*)

がんばりましょう~(*´∀`*)

表の作り方~テーブルタグの作成その(4)表の形を変える~


基本のテーブルタグです

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






枠と文字の間隔を広げます

<table border cellpadding="10">
<tr>
<td>枠と文字の間隔を広げます</td>
</tr>
</table>

cellpadding="10"を入れると枠と文字の間隔が広がります。

このブログは、何かの設定で間隔が広がらないんですよね(。-`ω´-)ンー
なので、見本になってないんですけど、ちゃんと広がりますので・・・




1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

<table border width="350">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

3×3の横幅350の表を作ってみました。




1-1 1-2 1-3
2-1 2-2
3-1 3-2

<table border width="350">
<tr>
<td rowspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>

縦につながりました。1-1の部分を3つつなげるには、<td>1-1</td>を、<td rowspan="3">1-1</td>に変えます
つなげたい数を入れると、その数だけ連結します。
その際に<td>3-3</td>と<td>2-3</td>はいらなくなります。




1-1 1-2
2-1 2-2 2-3
3-1 3-2 3-3

<table border width="350">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

横につながりました。1-1のっぶんを2つ横につなげるには、、<td>1-1</td>を、<td colspan="2">1-1</td>に変えます
つなげたい数を入れると、その数だけ連結します。
その際に<td>1-3</td>はいらなくなります。





これがわかれば、タイトルつきの表も作れるようになります(*´∀`*)

タイトル
2-1 2-2 2-3
3-1 3-2 3-3

<table border cellspacing="3"width="350" bgcolor="#ff9999">
<tr>
<td colspan="3" bgcolor="#ffccff">1-1</td>
</tr>
<tr>
<td bgcolor="#ffffff">2-1</td>
<td bgcolor="#ffffff">2-2</td>
<td bgcolor="#ffffff">2-3</td>
</tr>
<tr>
<td bgcolor="#ffffff">3-1</td>
<td bgcolor="#ffffff">3-2</td>
<td bgcolor="#ffffff">3-3</td>
</tr>
</table>

cellspacing="3"枠を太くします
bgcolor="#ff9999"枠の色を変えます
colspan="3"横を3つつなげます
bgcolor="#ffccff"枠の中の色を変えます
<td bgcolor="#ffffff">枠の中の色を白にします




こんな感じです~
これで少しはアレンジして表を作ることができるんじゃないかなぁ・・・
皆さんも表作ってみてくださいね(*´∀`*)

あと、表を中央に寄せたいときは、align="center"を最初の<table ~~~>の~~のところに入れてくださいね。

関連記事


関連カテゴリー
表の作り方 Trackback:(0) | Comments:(6) | [編集] | 投稿者 kyaro ri
コメント
このコメントは管理人のみ閲覧できます
2009-10-05 月  09:24:32 |  URL |  # [編集]
作表はずっと謎でした。
参考にさせていただきます。
ありがとうございます。
2010-01-26 火  18:13:30 |  URL | アリス #OuzrVbIE [編集]
アリスさん

ブログって表作るのに色々面倒ですよね(;´д`)
参考にしてくださってありがとうございます♪
2010-01-27 水  13:24:42 |  URL | きゃろり #8Eq7AU5U [編集]
こんばんは~♪
久しぶりに表を作ろうっとしたら、忘れてしまって、こちらを参考にさせて頂きました。
早速、やってみましたが、右の縦の線が付きません>< どうしてでしょうか?
すいませんが、教えて頂きたく思います。
2015-06-26 金  00:42:27 |  URL | みーたん #- [編集]
みーたんさん♪
FC2の記事制作画面のプレビューだと右の縦の線が消えてますねΣ(〇Д〇)

プレビューで見てみると、縦線は見えるので大丈夫かと思われます♪
2015-07-31 金  16:43:36 |  URL | きゃろり #8Eq7AU5U [編集]
このコメントは管理人のみ閲覧できます
2016-04-02 土  15:50:34 |  URL |  # [編集]
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)



Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産