## テーブル

トップ > 逆引きリファレンス > テーブル

#### ■ 基本的なテーブル

テーブル（表）を作成するには <table> を用います。<table>〜</table> がひとつのテーブル、<caption>〜</caption> が表題、<tr>〜</tr> が1行、<th>〜</th> がヘッダのマス（カラム）、 <td>〜</td> がデータのマス（カラム）に対応します。border=1 は枠線の太さを示します。

【各国の首都】
国名 | 首都
--- | ---
日本 | 東京
大韓民国 | ソウル
中国 | 北京

    <table border=1>
     <caption>【各国の首都】</caption>
     <tr><th>国名</th><th>首都</th></tr>
     <tr><td>日本</td><td>東京</td></tr>
     <tr><td>大韓民国</td><td>ソウル</td></tr>
     <tr><td>中国</td><td>北京</td></tr>
    </table>

#### ■ テーブルの中身を改行しないようにするには

テーブルの中身を改行させないようにするには、<tr>、<th>、<td> などのタグに nowrap 属性を指定します。

    <table>
    <tr><th nowrap>あああ</th><th>いいい</th><th>ううう</th></tr>
    </table>

#### ■ テーブル内のフォントを一度に指定するには

<table>〜</table> を、<font>〜</font> で囲むことはできません。テーブル内のフォントの大きさや色を一度に指定するには、スタイルシート を用いると便利です。下記の記述を <head>〜</head> の間に追記してみてください。

    <style type="text/css">
    <!--
    td, th {
      color: red;
      font-size: 200%;
      font-family: "ＭＳ ゴシック";
    }
    -->
    </style>

#### ■ カラム（セル）を連結（結合）するには

カラムを横や縦に連結するには <td> や <th> に colspan=n や rowspan=n 属性を指定します。n には連結するカラムの数を指定します。

横連結
縦連結 | ○○
△△

    <table border=1>
     <tr><td colspan=2>横連結</td>             </tr>
     <tr><td rowspan=2>縦連結</td><td>○○</td></tr>
     <tr>                         <td>△△</td></tr>
    </table>

#### ■ 空欄の見栄えをよくするには

テーブルの中に <td></td> のような空欄があると、その部分が凹んでくれずに見栄えが悪くなることがあります。この時は、<td><br></td> のように <br> を入れてやると、凹んで表示されるようです。

| ○○
○○ | ○○
| → |
| ○○
○○ | ○○

#### ■ テーブルの幅や高さを指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の width 属性や height 属性を指定します。または、スタイルシートの width や height を用います。ただし、HTML4.01 の仕様では、<table> タグに height 属性は指定できないので注意してください。

東京都 | 12,345,678
広島県 | 987,654
| → |
東京都 | 12,345,678
広島県 | 987,654

#### ■ カラムの内容を右寄せ、左寄せするには

<tr>、<th>、<td> に align 属性を指定することで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。

東京都 | 12,345,678
広島県 | 987,654
| → |
東京都 | 12,345,678
広島県 | 987,654

#### ■ カラムの内容を上寄せ、下寄せするには

<tr>、<th>、<td> に valign 属性を指定することで、カラムの内容を上に寄せたり、下に寄せたりすることができます。

これは下寄せです。 | これは上寄せです。

#### ■ テーブルの背景色を指定するには

テーブルに背景色を指定するには、<table>、<tr>、<th>、<td> の bgcolor 属性を指定します。スタイルシートの場合は background-color を用います。

■■ | ●●
--- | ---
□□ | ◎◎
◇◇ | ○○

    <table border=1 bgcolor="#ffcccc">
     <tr><th>■■</th><th>●●</th></tr>
     <tr><td>□□</td><td>◎◎</td></tr>
     <tr><td>◇◇</td><td>○○</td></tr>
    </table>

#### ■ テーブルの背景画像を指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の background 属性を指定します。スタイルシートの場合は background-image を用います。

■■ | ●●
--- | ---
□□ | ◎◎
◇◇ | ○○

    <table border=1 background="xxx.gif">
     <tr><th>■■</th><th>●●</th></tr>
     <tr><td>□□</td><td>◎◎</td></tr>
     <tr><td>◇◇</td><td>○○</td></tr>
    </table>

#### ■ テーブルを横に二つ並べるには

テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブル（枠線無し）を設けます。

ああ | ああ
ああ | ああ
ああ | ああ
ああ | ああ

    <table>
     <tr>
      <td>
       <table border=1>
        <tr><td>ああ</td><td>ああ</td></tr>
        <tr><td>ああ</td><td>ああ</td></tr>
       </table>
      </td>
      <td>
       <table border=1>
        <tr><td>ああ</td><td>ああ</td></tr>
        <tr><td>ああ</td><td>ああ</td></tr>
       </table>
      </td>
     </tr>
    </table>

#### ■ 枠線の色を変えるには

テーブルの枠線の色を変えるには、<table> タグに bordercolor などの属性を指定します。Internet Explorer では、bordercolordark（立体的な枠線の暗い部分）、bordercolorlight（立体的な枠線の明るい部分）の指定も可能です。

    <table border=1 bordercolor="#cc0000" bordercolordark="#ffffff">
      :
    </table>

#### ■ 枠線をシンプルにするには

テーブルの枠線をシンプルにするには、<table> タグに cellspacing=0 属性を指定します。

■■ | ●●
--- | ---
□□ | ◎◎
◇◇ | ○○

#### ■ 枠線をもっと細くするには

テーブルを二重にして背景色を制御することで、細い枠線を書くことができます。IE と Netscape Navigator の両方の見栄えを整えるには、border=0 などの属性を省略しないでください。

ああ | ああ
ああ | ああ

    <table border=0 bgcolor="#808080" cellspacing=0 cellpadding=0>
    <tr>
    <td>
     <table border=0 cellspacing=1 cellpadding=2>
     <tr bgcolor="#ffffff"><td>ああ</td><td>ああ</td></tr>
     <tr bgcolor="#ffffff"><td>ああ</td><td>ああ</td></tr>
     </table>
    </td>
    </tr>
    </table>

Internet Explorer では、bordercolordark 属性を指定する方法もあります。

ああ | ああ
ああ | ああ

    <table border=1
           bordercolor="#808080" bordercolordark="#ffffff"
           cellspacing=0 cellpadding=2>
     <tr><td>ああ</td><td>ああ</td></tr>
     <tr><td>ああ</td><td>ああ</td></tr>
    </table>

#### ■ テーブルの枠線を点線にするには

テーブルの枠線を点線にするには、border=1 ではなく、スタイルシートで点線の枠線を引きます。

    <html>
    <head>
    <title>サンプル</title>
    <style type="text/css">
    <!--
    .dot { border-bottom: 1px dotted gray; border-left: 1px dotted gray; }
    .dot th { border-top: 1px dotted gray; border-right: 1px dotted gray; }
    .dot td { border-top: 1px dotted gray; border-right: 1px dotted gray; }
    -->
    </style>
    </head>
    <body>
    <table class="dot" cellspacing=0>
    <tr><th>あああ</th><th>あああ</th></tr>
    <tr><td>あああ</td><td>あああ</td></tr>
    <tr><td>あああ</td><td>あああ</td></tr>
    <tr><td>あああ</td><td>あああ</td></tr>
    </table>
    </body>
    </html>

#### ■ 角の丸いテーブルを表示するには

角の丸いテーブルは、下記のように 5種類の画像を用いて実現します。

| 本文・・・ |

    <table cellspacing=0 cellpadding=0>
    <tr>
     <td><img src="rtbl1.gif" height=20 width=20></td>
     <td><img src="rtbl5.gif" height=20 width=100></td>
     <td><img src="rtbl2.gif" height=20 width=20></td>
    </tr>
    <tr>
     <td><img src="rtbl5.gif" height=50 width=20></td>
     <td background="rtbl5.gif">本文・・・</td>
     <td><img src="rtbl5.gif" height=50 width=20></td>
    </tr>
    <tr>
     <td><img src="rtbl3.gif" height=20 width=20></td>
     <td><img src="rtbl5.gif" height=20 width=100></td>
     <td><img src="rtbl4.gif" height=20 width=20></td>
    </tr>
    </table>

Copyright (C) 2003-2004 杜甫々
初版： 2003年10月12日、最終更新：2004年4月18日
http://www.tohoho-web.com/how2/table.htm