表を作る

tableタグ

まずはこのソースを見てみましょう。表を作るには<table>タグを用います。<tr>タグは横一列のセルを指定するタグで、<td>タグは各セルを指定するタグです。上のソースを実際に表示してみればその効果が良くわかると思います。

枠やタイトルを表示する

前の表には枠が表示されていませんでした。もし表の枠を表示したい場合は<table>タグの属性、borderで枠の幅を指定してください。
表のタイトルを表示したい場合は<caption>タグを用いてください。
<caption>タグは上のように表の大きさに合わせて文字をそろえてくれるので便利です。

セルの大きさを設定する

セルを統合することもできます。横に結合したいときはcolspan、下に結合したいときはrowspanに結合したい数を設定してください。
セル横の長さを設定するときはwidth,縦の長さを設定するときはheightに長さを設定してください。widthは列全体に、heightは行全体に影響を与えるので最も左、または最も上のセルでこれらの値を設定すれば十分でしょう
セルの中で文字をそろえることもできます。alignで横の位置を調節します。また、これに加え縦方向の位置に関するvalign属性も存在します。topで上に、middleで真ん中に、bottomで下にそろえることができます。
ではこれらの属性を使って表を作って見ます。
<th>タグを用いると文字が強調されます。行や列のタイトルに用いると良いでしょう。
widthやセルの文字列などいろいろ値を変えてみて表がどのように変化するか試してみましょう。

戻る