HTMLタグを勉強してホームページを作成しよう！【テーブル（表）に関するタグ】

　テーブル（表）に関するタグ

<table border>
<tr>
<td>テーブル（表）の中</td>
</tr>
</table>

基本のテーブルのタグです。テーブルであることを表すタグである <table> と </table>の間に、テーブルの横一行を表示するタグである <tr> と </tr> を記述し、さらにその中にデータを表示するタグである <td> 内容 </td> を記述する形が基本になります。border は枠線を表し、枠のあるテーブルを作成する場合に使います。

【 使用例 】

[ HTMLソース ]
<table border>
<tr>
<td>基本のテーブルです。</td>
</tr>
</table>

[ ブラウザの表示 ]

基本のテーブルです。

<table border>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>

テーブルの横の行は、<tr> と </tr> のタグを増やしたい行の数だけ並べて記述することで増やすことができます。
テーブルの縦の行は、<tr> と </tr> の中に記述する <td> データ </td> または <th> 見出し </th> のタグを増やしたい行の数だけ並べて記述することで増やすことができます。テーブルは <td> データ </td> だけでも作成できますが、見出しがあるテーブルを作成する場合は、見出しになる行に <th> 見出し </th> を使って太字で表示させることもできます。

【 使用例 】

[ HTMLソース ]
<table border>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</table>

[ ブラウザの表示 ]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

<table border="外枠の太さ">
<tr>
<td>テーブル（表）の中</td>
</tr>
</table>

テーブルの外枠の太さを指定したい時は、基本のテーブルタグに border="外枠の太さ" を記述することで指定することができます。

【 使用例 】

[ HTMLソース ]
<table border="5">
<tr>
<td>テーブルの外枠の太さを"5"に指定しました。</td>
</tr>
</table>

[ ブラウザの表示 ]

テーブルの外枠の太さを"5"に指定しました。

<table border cellspacing="全体の枠の太さ">
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

テーブルの外枠の太さを指定したい時は、基本のテーブルタグに border cellspacing="全体の枠の太さ" を記述することで指定することができます。

【 使用例 】

[ HTMLソース ]
<table border cellspacing="10">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</table>

[ ブラウザの表示 ]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

<table border cellpadding="余白の広さ">
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

テーブル内の余白の広さを指定したい時は、基本のテーブルタグに border cellpadding="余白の広さ" を記述することで指定することができます。

【 使用例 】

[ HTMLソース ]
<table border cellpadding="15">
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
<tr>
<td>データ4</td>
<td>データ5</td>
<td>データ6</td>
</tr>
</table>

[ ブラウザの表示 ]

見出し1	見出し2	見出し3
データ1	データ2	データ3
データ4	データ5	データ6

<table border width="横幅" height="縦幅">
<tr>
<td>テーブル（表）の中</td>
</tr>
</table>

テーブルの横幅を指定したい時は基本のテーブルタグに width="横幅" を、縦幅を指定したい時は width="縦幅" を記述することで指定することができます。

【 使用例 】

[ HTMLソース ]
<table border width="300" height="100">
<tr>
<td>横幅300ピクセル、縦幅100ピクセルのテーブルを作成します。</td>
</tr>
</table>

[ ブラウザの表示 ]

横幅300ピクセル、縦幅100ピクセルのテーブルを作成します。