テーブルタグを使おう!

テーブルタグを使うと、ホームページがより綺麗に見えるようになります。
基本的なタグから覚えていきましょう♪

テーブルダグの原形(?)

以下のテキストも<p>~</p>の間に書いてください。

↑のが原形です。(これを基準に考えます)
↑の「border="1"」の1はテーブルの枠の太さです。好きな数字に換えてください。(標準1)
サンプルはこちら

テーブルを増やそう!

以下のタグは横にテーブルを増やした形です。

↑のtdの間を増やすと、横に増えていきます。
サンプルはこちら

以下のタグは縦にテーブルを増やした形です。

↑のtrとtdの間を増やすと、縦に増えていきます。
サンプルはこちら

テーブルを連結!

言葉で説明をするよりもサンプルを見たほうがわかります。

縦に連結をする場合

rowspanの数字は連結させたいテーブルの個数です。
サンプルはこちら

横に連結をする場合

colspanの数字は連結させたいテーブルの個数です。
サンプルはこちら

テーブルの位置と大きさ・文字の位置

テーブルの位置を変えるには以下のようにします。



↑から順番に左側・中央・右側です。
サンプルはこちら

また画像のように、テーブルの大きさを指定することが可能です。

画像タグ説明ページ

テーブル内の文字の位置

テーブル内の文字が中央にこないようにするためのタグです。


↑ table ではなく td のところに入れるので注意!
サンプルはこちら

テーブルに色を

テーブルの枠に色を付けてみましょう。

↑の#0000ffの部分をカラーコードを見ながら、好きな色に変えることができます。
サンプルはこちら

次に背景に色を付けてみましょう。

↑の#ffccccの部分をカラーコードを見ながら、好きな色に変えることができます。
サンプルはこちら

なにか質問があれば

なにか質問があれば、「掲示板」で質問を受け付けます。