わかるＨＰ講座

あくまで、管理人自己流です。反論などはメールでお願いします。目標は"専業主婦でも簡単にわかるホームページ講座"です。 何もわからないという方大歓迎です！

どうしても必要というわけではありませんがとっても便利なのがテーブルです。
表を作ったり、ある部分だけ特別にしたり、見やすくしたりといろいろな使い道があります。
しかし、便利である反面、一番といっていいほどわかりにくい所でもあります。
理解できそうにもない人は必ず必要というわけではないので飛ばすのもよいでしょう。
では、最初は基本的なテーブルの作り方から。
下のタグ一覧を開くことをオススメします。

初心者の方 タグ一覧 一通り見る 考え方について

　
■提供タグ■
ここではタグを紹介しています。
タグがほしい人はそのままコピーして張り付ければＯＫ！
覚えたい人は自分で書いてやってみましょう。
赤いタグを<body>〜</body>内の好きなところに入れてください。
青いところは自分で変更ＯＫです。
※枠線をつけるの次の説明からは見やすいようにborder="1"を設定しています。
使った人や覚えた人はＢＢＳで教えてもらえると励みになります。

テーブルを作る
<table>
<tr><td>文字や画像</td></tr>
</table>
ちなみに、これ全体がテーブルです。
　
枠線をつける
<table border="太さ(数字)">
<tr><td>文字や画像</td></tr>
</table>
border="0"

border="1"

border="10"

※これ以降は見やすいようにborder="1"を設定しています。
　
横のマス目を増やす
<table>
<tr>
<td>文字や画像</td>
<td>文字や画像</td>
<td>文字や画像</td>
</tr>
</table>
文字 画像 リンク
横のマス目の増やし方は、<tr>〜</tr>の間に<td>〜</td>を増やせばいいのです。
　
縦のマス目を増やす
<table>
<tr><td>文字や画像</td></tr>
<tr><td>文字や画像</td></tr>
<tr><td>文字や画像</td></tr>
</table>
縦に増えます
閉じ忘れ注意
説明よんでね↓
縦のマス目の増やし方は、<tr><td>〜</td></tr>を増やせばいいのです。
<table>
<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>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

両方あわせるとこんな風になります。
タグの書き方(どこで改行するかなど)は個人の自由でＯＫです。 自分で見やすい方法で書きましょう。
書き方がいまいちわかりにくい人は考え方参照。
　
見出しをつける
<table>
<tr><th>文字</th></tr>
</table>
見出し
見出しはtdをthに変えただけです。この２つは何が違うかというとthの場合は自動でセンタリングし、太文字になります。
<table>
<tr><th>見出し</th></tr>
<tr><td>文字や画像</td></tr>
<tr><td>文字や画像</td></tr>
<tr><td>文字や画像</td></tr>
</table>
今日の目標
授業中は寝ない！
６時には家に帰る！
10時には寝る！

こんな風に使うと便利です。
　
表の大きさを設定する
<table width="横の大きさ(数字)" height="縦の大きさ(数字)">
<tr>
<td>文字や画像</td>
・・・・・(省略)
</tr>
</table>
☆ ■ ○
▼ ★ ◎
△ □ ●

表全体の大きさを設定。
<table>
<tr width="横の大きさ(数字)" height="縦の大きさ(数字)">
<td>文字や画像</td>
・・・・・(省略)
</tr>
</table>
☆ ■ ○
▼ ★ ◎
△ □ ●

一番最初のtrの大きさだけを設定。
この場合は<tr>〜</tr>部分(横１行)のみ大きくなります。
実際やってみるとわかりやすいです。
<table>
<tr>
<td width="横の大きさ(数字)" height="縦の大きさ(数字)">文字や画像</td>
・・・・・(省略)
</tr>
</table>
☆ ■ ○
▼ ★ ◎
△ □ ●

一番最初のtdの大きさだけを設定。
この場合は<td>〜</td>部分(１マス)のみ大きくなります。
実際やってみるとわかりやすいです。


背景の色を変える
<table bgcolor="色名(コード)">
(省略)
</table>
■ ○
▼ ★

tableの後につけるとテーブル全体の色が変化。
<table>
<tr bgcolor="色名(コード)">
(省略)
</table>
■ ○
▼ ★

trの後につけるとつけた行の色が変化。
<table>
<tr>
<td bgcolor="色名(コード)">
(省略)
</table>
■ ○
▼ ★

tdの後につけるとつけたマスの色だけが変化。
　
背景を画像で表示
<table background="画像ファイル名">
(省略)
</table>
■ ○
▼ ★

tableの後につけるとテーブル全体の背景が変化。
<table>
<tr>
<td background="画像ファイル名">
(省略)
</table>
■ ○
▼ ★

tdの後につけるとつけたマスの背景だけが変化。
※trにつけた場合は変化しないようです。
　
枠線の色を変える
<table border="太さ(数字)" bordercolor="色名(コード)">
(省略)
</table>
■ ○
▼ ★
border="5" bordercolor="red"に設定しています。
　
枠線の色を変える２
<table border="太さ(数字)" bordercolorlignt="色名(コード)" bordercolordark="色名(コード)">
(省略)
</table>
■ ○
▼ ★
border="5" bordercolorlight="red" bordercolordark="blue"に設定。
　
マス目をまとめる
<table>
<tr>
<td colspan="結合する横のマス目の数(数字)">文字や画像</td>
(省略)
</table>
四角
■ □
三角
▲ △
<table>
<td colspan="2">四角</td>
<tr>
<td>■</td>
<td>□</td>
</tr><tr>
<td colspan="2">三角</td>
</tr><tr>
<td>▲</td>
<td>△</td>
</tr></table>

上に書いてあるのは表のソースです。
見えやすくなる反面、とってもわかりにくいですね。
縦の結合はあまり使わず、こちらの方が比較的わかりやすいのでこの横結合のみ覚えるのもいいかと思います。
<table>
<tr>
<td rowspan="結合する縦のマス目の数(数字)">文字や画像</td>
(省略)
</table>
四
角		 ■ 三
角		 ▲
□ △
<table>
<tr><td rowspan="2">四角</td>
<td>■</td>
<td rowspan="2">三角</td>
<td>▲</td>
</tr><tr>
<td>□</td>
<td>△</td>
</tr></table>

上に書いてあるのは表のソースです。
見えやすくなる反面、とってもわかりにくいですね。

テーブルにタイトルをつける
<table>
<caption>文字</caption>
(省略)
</table>
僕の家族
男 女
父(元気) 僕(病弱) 母(伝説) 妹(最強)

上の僕の家族という部分が<caption>文字</caption>の部分になります。
<table>〜</table>内に書くのにテーブルの上に表示されます。
<table>
<caption align="bottom">文字</caption>
(省略)
</table>
僕の家族
男 女
父(元気) 僕(病弱) 母(伝説) 妹(最強)

上の僕の家族という部分が<caption align="bottom">文字</caption>の部分になります。
align="bottom"をつけると表の下に表示されます。
　
枠線の表示を変える
<table frame="表示方法">
(省略)
</table>
■ ○
▼ ★

frame="void"(外枠非表示)
■ ○
▼ ★

frame="above"(外枠上部のみ表示)
■ ○
▼ ★

frame="below"(外枠下部のみ表示)
■ ○
▼ ★

frame="hsides"(外枠上下のみ表示)
■ ○
▼ ★

frame="lhs"(外枠左部のみ表示)
■ ○
▼ ★

frame="rhs"(外枠右部のみ表示)
■ ○
▼ ★

frame="vsides"(外枠左右のみ表示)
■ ○
▼ ★

frame="box"(外枠全部分表示)
何も設定しないとboxの状態になります。
<table rules="表示方法">
(省略)
</table>
■ ○
▼ ★

rules="none"(内枠非表示)
■ ○
▼ ★

rules="cols"(内枠横のみ表示)
■ ○
▼ ★

rules="none"(内枠縦のみ表示)
■ ○
▼ ★

frame="hsides"(内枠全表示)
何も設定しないとallの状態になります。
　
文字の位置を変える
<table>
<tr>
<td align="左右の位置" valign="上下の位置">
(省略)
</table>
left center right
top ■ ○ ☆
middle ▼ ★ ●
bottom ▲ □ △
align=""の中に入るのを[left(左),center(中央),right(右)]
valign=""の中に入るのを[top(上),middle(中央),bottom(下),baseline(基本位置)]から選ぶ。
　
テーブルをよけて文字を書く
<table align="左右位置">
(省略)
</table>
■ ○
▼ ★
これは、align="right"として設定しています。設定しないと文字は表の下に表示されます。
■ ○
▼ ★
これは、align="left"として設定しています。tableの後にalignをつけた時と、tdの後にalignをつけた時ではだいぶ違うので注意
　
テーブルと文字の間隔を決める
<table align="左右位置" vspace="横の間隔(数字)" hspace="縦の間隔(数字)">
(省略)
</table>
■ ○
▼ ★
これは、align="right" vspace="20" hspace="20"として設定しています。設定する数字はピクセル数です。Netscape Navigatorのみのタグになります。
■ ○
▼ ★
これは、align="left" vspace="0" hspace="0"として設定しています。設定する数字はピクセル数です。Internet Explorerでは変わりません。


　
■考え方■
テーブルの必要性。
一通りやってみて、テーブルタグは難しいくせにほとんど活躍の場が無いんじゃないか？って感じはしないでしょうか？
しかし、ＨＰを作っていくうえで凝ったのを作ろうと思うと必ず活躍の場が出てきます。
他の方のＨＰをまわっていて、ここはなんか素敵だな〜とか(笑)、どうやってこんなに見やすくしてるんだろう？って思うことありませんか？
そういうＨＰの管理者はテーブルタグの使い方が上手な方が多いです。
自分の思ったとおりに表示できない！なんて時はテーブルタグを使ってみてください。

タグの書き方について
つくりましょうでも少し説明しましたが、タグをどんな風に書くかは重要ではありません。
たとえば、
<table>
<tr>
<td>文字</td>
</tr>
</table>
と書いた時と、
<table><tr><td>文字</td></tr></table>
と書いた時では２つとも同じ用に表示されます。
しかし、あとでミスに気づき編集しやすいのは上の方ですよね。
さらに、
<table>
　<tr>
　　<td>文字</td>
　</tr>
</table>
のように空白やタブを使ってより見やすい方法で記入している方もいます。
自分で一番わかりやすいやり方を見つけるのがいいでしょう。

質問・感想・訂正などございましたらＢＢＳへ気がるによろしくお願いします。

タグコピペしたら投票よろしくお願いします。

来るたびに投票してもらえるとよりうれしい…(ぉぃ



初心者の方 タグ一覧 一通り見る 考え方について



テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜！
無料ホームページ 無料のクレジットカード 海外格安航空券　海外旅行保険が無料！ 海外ホテル