テーブルタグは表を作ることができます。
テーブルの中の1つ1つのマス目
である「セル」という部分に文字や画像などを入れていきます。
テーブルは横方向にセルを増やしていったり縦方向に段組していく
ことができます。
テーブルに border属性を指定しないと枠線は表示されません。
border="0"と指定しても枠線は非表示になります。
■ 基本的なテーブルを作る
まずは1マスだけの基本的なテーブル(表)を作ります。
テーブルを作るには<table>タグの中に<tr>タグ
と<td>タグを記述します。
テーブルの枠線を太くしたい場合はborder="数字"の値を
大きくします。
【ブラウザ表示】
ソース
<table border="1">
………テーブルの枠線の太さ
<tr>
………trはテーブル
の行を表します。
<td>セル</td>
………tdはテーブル
の列を表し
ます。
</tr>
</table>
■ 横方向にセルを増やしていく
<td>~</td><td>~</td>のように
<td>タグを横につなげていくことで横方向にセルを増やしていく
ことができます。
【ブラウザ表示】
ソース
<table border="1">
<tr>
<td>セル1</td><td>セル2</td>
…横方向にセルが
増えます(1列、2列…)
</tr>
</table>
■ 縦方向にセルを段組していく
縦方向にセルを段組していくこともできます。
HTMLソースではテーブルの1行目の終わりと2行目の始めの
区切りをわかりやすくするため
</tr>
<tr>
のように1行以上のスペースを空けます。
【ブラウザ表示】
ソース
<table border="1">
<tr>
<td>セル1</td>
</tr>
ここで1行目が終了しセル2は次の行へ段組されます。
<tr>
<td>セル2</td>
</tr>
</table>
■ セルに見出しを表示する
<th>~</th>で見出しを表示することができます。
tdとの違いはセル内の
文字がセンタリングされ太字で表示されます。
【ブラウザ表示】
ソース
<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
■ その他の項目
・
横幅、高さを指定する
・
画像や背景色を指定する
・
表示位置を指定する
・
テーブルに表題をつける
・
間隔、余白を指定する
・
セルを結合する
・
枠線の色やスタイルを指定する
・
行と列をグループ化する
・
枠線の表示方法を指定する
・
細い枠線のテーブル
・
テーブルを横に並べる
・
テーブルで空白を作る
HTMLタグ一覧のページに戻る
|