テーブルの基本・・・一マスのテーブル
HＴMLタグのページ
一セルのテーブルを作る～（セルを増やす）行を増やす・列を増やす
・タイトルをつける・見出しをつける
・タイトルをつける・見出しをつける
テーブルは単に表を作るだけでなくページの構成にとても重要かつ、基本中の基本ですので、是非覚えましょう。
テーブルの基本（一セルのテーブル）
タグを打つ前に・・・
テーブルの基本タグ
* border="2" width="100" height="100"については下記で解説。
<table>～</table>・・・テーブルの全体を指定するタグになります。
<tr>～</tr>・・・テーブルの行を指定するタグになります。
<td>～</td>・・・セルを指定するタグです。この中に文章や画像を打ち込みます。
ブラウザ表示
上のテーブルの枠線を２から8の太さに変えてます
* border="0"にすれば枠線は見えなくなります。
ブラウザ表示
★ 表の一つ一つのマス目を セルと呼びます。
（表計算ソフトで使うのと同じ呼び方です）
★ 横方向は 行(ギョウ）、縦方向は 列(レツ）です。
テーブルの基本タグ
<table
border="2" width="100" height="100" >
<tr>
<td> この部分に文章を入れます<br>改行も出来ますし、画像もさらにテーブルも入ります。
</td>
</tr>
</table>
<tr>
<td> この部分に文章を入れます<br>改行も出来ますし、画像もさらにテーブルも入ります。
</td>
</tr>
</table>
<table>～</table>・・・テーブルの全体を指定するタグになります。
<tr>～</tr>・・・テーブルの行を指定するタグになります。
<td>～</td>・・・セルを指定するタグです。この中に文章や画像を打ち込みます。
ブラウザ表示
この部分に文章を入れます
改行も出来ますし、画像もさらにテーブルも入ります。
改行も出来ますし、画像もさらにテーブルも入ります。
* このテーブルは枠線の太さ（border="2"）が2、幅が100(width="100")、高さが100(height="100")です。
テーブルの枠（罫線）の太さを変える<table border="太さ">
<table border="8"
width="100" height="100">
<tr>
<td>枠線の太さを8に変えました
</td>
</tr>
</table>
<tr>
<td>枠線の太さを8に変えました
</td>
</tr>
</table>
* border="0"にすれば枠線は見えなくなります。
ブラウザ表示
枠線の太さを8に変えました
テーブルのサイズを変える <table width="幅" height="高さ">
テーブルの幅を変える<table width="テーブル幅">
<table border="2" width="400"
height="100">
<tr>
<td>テーブルの幅を100から400に変えました
</td>
</tr>
</table>
<tr>
<td>テーブルの幅を100から400に変えました
</td>
</tr>
</table>
ブラウザ表示
テーブルの幅を100から400に変えました
テーブルの高さを変える<table height="高さ">
<table border="2" width="100" height="150"
>
<tr>
<td>テーブルの高さを100から150に変えました
</td>
</tr>
</table>
<tr>
<td>テーブルの高さを100から150に変えました
</td>
</tr>
</table>
ブラウザ表示
テーブルの高さを100から150に変えました
幅と高さの指定を組み合わせてみます
<table border="2" width="400" height="150"
>
<tr>
<td>テーブルの幅を400に、高さを150に指定しました。 </td>
</tr>
</table>
<tr>
<td>テーブルの幅を400に、高さを150に指定しました。 </td>
</tr>
</table>
ブラウザ表示
テーブルの幅を400に、高さを150に指定しました。
テーブルの行を増やす（縦にセルを増やす）<tr>～</tr>
テーブルの行を増やすには<tr>～</tr>を増やす
* 目に見えるようにborder="1"にしてあります。
* この場合、<table width="100" height="200">のheight="200"は省略できます。
（セルごとに高さの指示がされているため。）
* 目に見えるようにborder="1"にしてあります。
<table width="100" height="100" border="1">
<tr><td>1行のテーブル </td> </tr>
</table>
<tr><td>1行のテーブル </td> </tr>
</table>
縦に一行増やす
<table width="100" height="100" border="1">
<tr><td>1行目 </td> </tr>
<tr> <td>増やした行 </td> </tr>
</table>
<tr><td>1行目 </td> </tr>
<tr> <td>増やした行 </td> </tr>
</table>
1行のテーブル
⇒
| 1行目 |
|---|
| 増やした行 |
セルごとの高さの指定
下の例の場合は、縦に一行増したので、テーブル全体の高さheightは 100x2＝ 200
（テーブル全体の高さの指示）
さらに各々のセルの高さが100づつなので <td height="100"
>と指示する
（セルの高さの指示）
<table width="100" height="100" border="1">
<tr><td>1行のテーブル </td> </tr>
</table>
<tr><td>1行のテーブル </td> </tr>
</table>
⇒
<table width="100" height=" 200
"border="1">
<tr> <td hieght="100"> 1行目<br>
高さ100です </td> </tr>
<tr> <td height="100> 増やした行の高さも100です</td> </tr>
</table>
<tr> <td hieght="100"> 1行目<br>
高さ100です </td> </tr>
<tr> <td height="100> 増やした行の高さも100です</td> </tr>
</table>
1行のテーブル
| 1行目 高さ100です |
|---|
| 増やした行の高さも100です |
* この場合、<table width="100" height="200">のheight="200"は省略できます。
（セルごとに高さの指示がされているため。）
テーブルの列を増やす（横にセルを増やす）<td>～</td>
テーブルの列を増やすには<td>～</td>を増やす
ブラウザ表示
しかし、各セルの幅が指示されていないので同じセル幅になっていません。
同じセル幅にするために、<td>に幅の指示を入れます。 <td width="100">
ブラウザ表示
<table width="200" height="100" border="1">
<tr>
<td>横にセルを一つ増やします</td>
<td>増やしたセルです </td>
</tr>
</table>
<tr>
<td>横にセルを一つ増やします</td>
<td>増やしたセルです </td>
</tr>
</table>
ブラウザ表示
セルを一つ増やします
増やしたセルです
しかし、各セルの幅が指示されていないので同じセル幅になっていません。
同じセル幅にするために、<td>に幅の指示を入れます。 <td width="100">
<table width="200" height="100" border="1">
<tr>
<td width="100"> </td>
<td width="100"> </td>
</tr>
</table>
<tr>
<td width="100"> </td>
<td width="100"> </td>
</tr>
</table>
ブラウザ表示
縦横にセルを増やしてみます
縦3行、横3列のセルの大きさが00x100つづのテーブルを作ります
<table width="300" height="300" border="1">
<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>
<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>
* <tr>～</tr> が3回繰り返されているので3行のテーブルになります。
* <td>～</dt> が1行（<tr>～</tr>の間に）に3回繰り返されているので横の列は3列となります。
ブラウザ表示
| １ | ２ | ３ |
| ４ | ５ | ６ |
| ７ | ８ | ９ |
* セルの位置を打ち込んだ数字で確認しておきましょう。
テーブルにタイトル(キャプション)をつける <caption>タイトル</caption>
タグ
ブラウザ表示
タイトル
タイトル
<table width="100" height="100" border="1">
<caption> タイトル </caption>
<tr>
<td>1行のテーブル</td>
</tr>
</table>
<caption> タイトル </caption>
<tr>
<td>1行のテーブル</td>
</tr>
</table>
ブラウザ表示
セル
* align属性を持たせない場合は、テーブルの上に表示され、一般的なブラウザではテーブルに対してセンタリングされて表示されます。
* キャプションはalign=left またはalign=rightに対応していないブラウザが多いようなので、あまり使わない方がいいらしです。
テーブルの行や列を増やしてタイトル（キャプション）をつける
<table width="100" height="100" border="1">
<caption> タイトル </caption>
<tr>
<td>セル１</td>
<td>セル2</td>
</tr>
</table>
<caption> タイトル </caption>
<tr>
<td>セル１</td>
<td>セル2</td>
</tr>
</table>
セル１
セル2
テーブルに見出しをつける <tr> <th>見出し </Th> </tr>
テーブルに <th>見出し</Th>を加えるとそのっせセルは列や行に対しての見出しとなります
見出しセルの中の文字は強調されます
タグ
ブラウザ表示
縦横にセルを増やしたテーブルに見出しをつけてみ見る
タグ (1行2列のテーブルの上に見出しをつける）
ブラウザ表示
見出しセルの中の文字は強調されます
タグ
<table width="100" height="100" border="1">
<tr>
<th> 見出し </Th>
</tr>
<tr>
<td> セル</td>
</tr>
</table>
<tr>
<th> 見出し </Th>
</tr>
<tr>
<td> セル</td>
</tr>
</table>
ブラウザ表示
| 見出し |
|---|
| セル |
縦横にセルを増やしたテーブルに見出しをつけてみ見る
タグ (1行2列のテーブルの上に見出しをつける）
<table width="100" height="100" border="1">
<tr>
<th> 見出しa </Th>
<th> 見出しb </Th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>
<tr>
<th> 見出しa </Th>
<th> 見出しb </Th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>
ブラウザ表示
| 見出しa | 見出しb |
|---|---|
| セル1 | セル2 |
© Rakuten Group, Inc.
