本文へスキップ

カリンボウ株式会社は、自由な発想で、新しいデザインの提案とインターネットショップ運営の会社です。

Mail: info@calimbo.jp

トップページ >技術コラム >HTML基礎

基本的な表を作る。

表とは

本来の機能は、表を作ることです。レイアウトの仕方が限られた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

バナースペース

カリンボウ株式会社

〒400-0862
山梨県甲府市朝気1-2-37
アルガハイツ101号室

E-MAIL info@calimbo.jp
TEL      055-244-5909
FAX      055-236-9850

[1]HTMLの基礎
1.1.HTMLとは
1.2.ソフトが作るHTML
1.3.HTMLの基本構造
1.4.<head>で使われるタグ
1.5.<body>で使われる基本なタグ
1.6.リスト
1.7.画像の表示
1.8.基本的な表を作る