表とは
本来の機能は、表を作ることです。レイアウトの仕方が限られたHTMLでは、表の機能を使うことでより自由なレイアウトをすることが可能になります。
表の作り方
<table>〜/<table>が表の範囲となります。
<tr>〜</tr>が1行を示します。
<td>〜</td>が列を示します。
<th>〜</th>が見出しを示します。
例)行3列の表を作ります。
<table>
<tr>
<th>会社名</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>カリンボウ株式会社</td>
<td>山梨県甲府市朝気1-2-37</td>
<td>055-288-9697</td>
</tr>
</table>
表示例(上記の場合、ブラウザでは枠線は表示されません)
会社名 |
住所 |
電話番号 |
カリンボウ株式会社 |
山梨県甲府市朝気1-27-37 |
055-288-9697 |
表の枠線の太さはborder属性を使い、枠線の幅をピクセルで表します。
<table border="5">
<tr>
<th>会社名</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>カリンボウ株式会社</td>
<td>山梨県甲府市朝気1-2-37</td>
<td>055-288-9697</td>
</tr>
</table>
表示例
会社名 |
住所 |
電話番号 |
カリンボウ株式会社 |
山梨県甲府市朝気1-2-37 |
055-288-9697 |
表のサイズを指定する。
指定しない場合はブラウザが勝手に表のサイズを指定します。
表の全体のサイズを指定
width属性とheight属性を使用します。指定はピクセルで指定します。
width属性は幅の指定です。
heigtht属性は高さの指定です。
例)上記表にサイズを指定します。
<table border="2" width="600">
<tr>
<th>会社名</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>カリンボウ株式会社</td>
<td>山梨県甲府市朝気1-2-37</td>
<td>055-288-9697</td>
</tr>
</table>
表示例
会社名 |
住所 |
電話番号 |
カリンボウ株式会社 |
山梨県甲府市朝気1-2-97 |
055-288-9697 |
列のサイズを指定
列のサイズはwidth属性と、height属性で指定します。
例)上記表にサイズを指定します。
<table border="2" >
<tr>
<th width="150" height="30">会社名</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td width=150" height="60">カリンボウ株式会社</td>
<td>山梨県甲府市朝気1-2-37</td>
<td>055-288-9697</td>
</tr>
</table>
表示例
会社名 |
住所 |
電話番号 |
カリンボウ株式会社 |
山梨県甲府市朝気1-2-37 |
055-288-9697 |