テーブル

HTMLリファレンス > 基本的なテーブル

■ 基本的なテーブル

テーブル（表）を作成するには <table> を用います。

  1. <table>～</table> がひとつのテーブル
  2. <caption>～</caption> が表題
  3. <tr>～</tr> が1行
  4. <th>～</th> がヘッダのセル
  5. <td>～</td> がデータのセル
に対応します。

【各国の首都】
国名首都
日本東京
大韓民国ソウル
中国北京
<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>

なお、<table>タグの属性 border="1" （または、""） は枠線を表示する指定です。　（HTML4.01 までは、枠線の太さを指定できましたが、HTML5 では、枠線の太さは CSS の border-widthプロパティ で指定します。）

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

テーブルの中身を改行させないようにするには、<tr>、<th>、<td> などのタグに CSS で white-spaceプロパティ の値に nowrap を指定します。

ああああああああああいいいいいいいいいいうううううううううう
<table border="1">
  <tr>
    <th style="white-space:nowrap;">ああああああああああああああああああ</th>
    <th>いいいいいいいいいいいいいいいいいい</th>
    <th>うううううううううううううううううう</th>
  </tr>
</table>

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

テーブル内のフォントの大きさや色を一度に指定するには、CSS の font（font-size，font-family，font-weight）や color などのプロパティを用います。　下記の記述を <head>～</head> の間に追記してみてください。

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

具体例として、たとえば、

<html>
   <head>
      <title>テーブル内のフォントを一度に指定</title>
      <style type="text/css">
      <!--
      td, th {
        color: red;
        font-size: 200%;
        font-family: "ＭＳ ゴシック";
      }
      -->
      </style>
   </head>
   <body>
      <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>
   </body>
</html>
をメモ帳にコピーして、.html という拡張子をつけた名前で保存してみましょう。　そして、IEで表示して、上の基本的なテーブルと比べてみてください。

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

カラム（セル）を横や縦に連結するには <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>

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

テーブルの幅や高さを指定するには、<table>、<tr>、<th>、<td> に対して CSS の widthプロパティ や heightプロパティ を用います。

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

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


<table border="1">
 <tr><td>東京都</td><td>12,345,678</td></tr>
 <tr><td>広島県</td><td>987,654</td></tr>
</table>
↓
<table border="1" style="width:200px; height:80px;">
 <tr><td>東京都</td><td>12,345,678</td></tr>
 <tr><td>広島県</td><td>987,654</td></tr>
</table>

［注意］ HTML5 では、HTML4.01 までと異なり、<table> タグに width属性や height属性は指定できないので注意してください。

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

<tr>、<th>、<td> に CSS の text-alignプロパティ による指定をすることで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。

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

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

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

<table border="1" style="width:150px;">
 <tr><td>東京都</td><td>12,345,678</td></tr>
 <tr><td>広島県</td><td>987,654</td></tr>
</table>
↓
<table border="1" style="width:150px;">
 <tr><td>東京都</td><td style="text-align:right;">12,345,678</td></tr>
 <tr><td>広島県</td><td style="text-align:right;">987,654</td></tr>
</table>
↓
<table border="1" style="width:150px;">
 <tr><td>東京都</td><td style="text-align:center;">12,345,678</td></tr>
 <tr><td>広島県</td><td style="text-align:center;">987,654</td></tr>
</table>

［注意］ HTML5 では、HTML4.01 までと異なり、<table>、<tr>、<th>、<td> などのタグに align属性 （= 廃止）は指定できないので注意してください。

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

<tr>、<th>、<td> に CSS の vertical-alignプロパティ による指定をするすることで、カラムの内容を上に寄せたり、下に寄せたり、また中央配置にしたりすることができます。

これは下寄せです。 これは上寄せです。 これは中央配置です。 
<table border="1" style="height:45px;">
  <tr>
    <td style="vertical-align:bottom;">これは下寄せです。</td>
    <td style="vertical-align:top;">これは上寄せです。</td>
    <td style="vertical-align:center;">これは中央配置です。</td>
  </tr>
</table>

［注意］ HTML5 では、HTML4.01 までと異なり、<table>、<tr>、<th>、<td> などのタグに valign属性 （= 廃止）は指定できないので注意してください。

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

テーブルに背景色を指定するには、<table>、<tr>、<th>、<td> に CSS の background-colorプロパティ を用います。

■■●●
□□◎◎
◇◇○○
<table border="1" style="background-color:#ffcccc">
  <tr><th>■■</th><th>●●</th></tr>
  <tr><td>□□</td><td>◎◎</td></tr>
  <tr><td>◇◇</td><td>○○</td></tr>
</table>

［注意］ HTML5 では、HTML4.01 までと異なり、<table>、<tr>、<th>、<td> などのタグに bgcolor属性 （= 廃止）は指定できないので注意してください。

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

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> に CSS の background-image を用います。

■■●●
□□◎◎
◇◇○○


   ＋
colosseo
画像：colosseo.jpg

↓

■■●●
□□◎◎
◇◇○○
<table border="1" style="background-image:url(colosseo.jpg);">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

［注意］ HTML5 では、HTML4.01 までと異なり、<table>、<tr>、<th>、<td> などのタグに background属性 （= 廃止）は指定できないので注意してください。

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

テーブルを横に二つ並べるには、<table> に CSS の floatプロパティ を用います。　また、それに続く文章などが回りこまないようにするため、２つ目のテーブルの後の要素には clearプロパティ を設定します。

ああああ
ああああ
ああああ
ああああ

<table border="1" style="float:left; margin: 0px 5px;">
  <tr><td>ああ</td><td>ああ</td></tr>
  <tr><td>ああ</td><td>ああ</td></tr>
</table> 
<table border="1" style="float:left; margin: 0px 5px;">
  <tr><td>ああ</td><td>ああ</td></tr>
  <tr><td>ああ</td><td>ああ</td></tr>
</table>
<br style="clear:left;">

■ テーブルを左側に配置し後続文章を右側に回り込ませるには

テーブルを左側に配置し後続文章を右側に回り込ませるには、<table> に CSS の floatプロパティ を用います。　また、あるところから後の文章などが回り込まないようにするためには、<br>，<p>，<div> などの要素で clearプロパティ を設定します。

ああああ
ああああ
いいいい
いいいい
うううう
うううう
ここで改行します。
改行しました。
{ float: left; } の場合，後続の文章は通常の <br> だけでは
この位置に改行されますが，<br> に style="clear:left;" とした
style属性を追加すると，行頭を表より下の左端（left）から表示できる
この位置に改行されます。 
<table border="1" style="float:left; margin:0px 1em;">
   <tr><td>ああ</td><td>ああ</td></tr>
   <tr><td>ああ</td><td>ああ</td></tr>
   <tr><td>いい</td><td>いい</td></tr>
   <tr><td>いい</td><td>いい</td></tr>
   <tr><td>うう</td><td>うう</td></tr>
   <tr><td>うう</td><td>うう</td></tr>
</table> 
ここで改行します。<br>改行しました。
<br>{ float: left; } の場合，後続の文章は通常の &lt;br&gt; だけでは
<br>この位置に改行されますが，&lt;br&gt; に <em>style="clear:left;"</em> とした
<br> style属性を追加すると，行頭を表より下の左端（left）から表示できる
<br style="clear:left;">この位置に改行されます。

■ テーブルを右側に配置し後続文章を左側に回り込ませるには

テーブルを右側に配置し後続文章を左側に回り込ませるには、<table> に CSS の floatプロパティ を用います。　また、あるところから後の文章などが回り込まないようにするためには、<br>，<p>，<div> などの要素で clearプロパティ を設定します。

ああああ
ああああ
いいいい
いいいい
うううう
うううう
ここで改行します。
改行しました。
{ float: right; } の場合，後続の文章は通常の <br> だけでは
この位置に改行されますが，<br> に style="clear:right;" とした
style属性を追加すると，行頭を表より下の左端（left）から表示できる
この位置に改行されます。 
<table border="1" style="float:right; margin: 0px 1em;">
   <tr><td>ああ</td><td>ああ</td></tr>
   <tr><td>ああ</td><td>ああ</td></tr>
   <tr><td>いい</td><td>いい</td></tr>
   <tr><td>いい</td><td>いい</td></tr>
   <tr><td>うう</td><td>うう</td></tr>
   <tr><td>うう</td><td>うう</td></tr>
</table> 
ここで改行します。<br>改行しました。
<br>{ float: right; } の場合，後続の文章は通常の &lt;br&gt; だけでは
<br>この位置に改行されますが，&lt;br&gt; に <em>style="clear:right;"</em> とした
<br> style属性を追加すると，行頭を表より下の左端（left）から表示できる
<br style="clear:right;">この位置に改行されます。

■ テーブルを中央に配置するには

テーブルを中央に配置するには、<table> に対して CSS の margin-left と margin-right の２つのプロパティでともに "auto" を指定します。　これらのプロパティの値は、marginプロパティを用いても指定可能です。　指定方法の詳細は、 これらのプロパティの解説を見てください。

■■●●
□□◎◎
◇◇○○
<table border="1" style="margin: 0px auto;">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

■ 枠線の太さを変えるには

テーブルの枠線の太さを変えるには、<table> に CSS の border-widthプロパティ を用います。

ただし、border-widthプロパティ を指定する場合には、border-styleプロパティ の指定も一緒に行わないと、一般的に枠線は表示されません。（IE8は例外的に表示されるようです。）　これは、border-styleプロパティ の初期値が "none"（枠線なし）になっているためです。

指定方法の詳細は、 border-widthプロパティ の解説を見てください。

■■●●
□□◎◎
◇◇○○
<table border="1" style="border-style:solid; border-width: 2px 1em 0.5em 6px;">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

■ 枠線の色を変えるには

テーブルの枠線の色を変えるには、<table> に CSS の border-colorプロパティ を用います。　指定方法の詳細は、 border-colorプロパティ の解説を見てください。

なお、以下例では枠線の太さの変更も併せて行っていますので、枠線を表示するためには、さらに、border-styleプロパティ の指定も必要です。（「枠線の太さを変えるには」を参照。）

■■●●
□□◎◎
◇◇○○
<table border="1" style="border-style:solid; border-width:3px;
                         border-color:#ff0000 #00ff00 #00ff00 #ff0000;">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

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

テーブルの枠線をシンプルにするには、<table> に CSS の border-collapseプロパティ，border-styleプロパティ，border-widthプロパティ を用います。

■■●●
□□◎◎
◇◇○○
<table border="1" style="border-collapse:collapse; border-style:solid; border-width:2px;">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>

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

テーブルの枠線を点線にするには、CSS の borderプロパティ や border-styleプロパティ などを使って点線の枠線を引きます。

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

これをIEで表示すると このように なります。

■ 杜甫々氏（とほほのWWW入門）ご愛用のテーブル

「とほほのWWW入門」の各ページで使用されている次のようなスタイルのテーブルは、実は HTML4.01 までの規格により作成されております（2012.05.25現在）。

【Windows日本語フォント】
フォント名説明
ＭＳ ゴシックMicrosoft 等幅ゴシック。
ＭＳ 明朝Microsoft 等幅明朝。
ＭＳ ＰゴシックMicrosoft プロポーショナルゴシック。
ＭＳ Ｐ明朝Microsoft プロポーショナル明朝。
MS UI GothicMicrosoft ユーザインタフェース用ゴシック。

しかし、ここに表示したものは、HTML5 と CSS で作成したものであり、次のようにすると作れます。

<html>
   <head>
      <title>杜甫々氏ご愛用のテーブル</title>
      <style type="text/css">
      <!--
         TABLE.kw { /* KeyWord */
            border-color:#808080 #ffffff #ffffff #808080;
            border-width: 1px;
            border-style: solid;
            border-spacing: 0px; 
            padding: 0px;
         }
         TABLE.kw TH, TABLE.kw TD { /* KeyWord */
             border-color:#ffffff #808080 #808080 #ffffff;
             border-width: 1px;
             border-style: solid;
             padding: 2.2px;
         }
         TABLE.kw TH { /* KeyWord */
             background-color:#c0c0c0;
         }
      -->
      </style>
      </head>
      <body>
         <table border="1" class="kw" style="margin:0px auto;">
            <caption style="text-align:left;">【Windows日本語フォント】</caption>
            <tr bgcolor="#c0c0c0"><th>フォント名</th><th>説明</th></tr>
            <tr><td style="white-space:nowrap;">ＭＳ ゴシック</td>
                <td>Microsoft 等幅ゴシック。</td>
            </tr>
            <tr><td style="white-space:nowrap;">ＭＳ 明朝</td>
                <td>Microsoft 等幅明朝。</td>
            </tr>
            <tr><td style="white-space:nowrap;">ＭＳ Ｐゴシック</td>
                <td>Microsoft プロポーショナルゴシック。</td>
            </tr>
            <tr><td style="white-space:nowrap;">ＭＳ Ｐ明朝</td>
                <td>Microsoft プロポーショナル明朝。</td>
            </tr>
            <tr><td style="white-space:nowrap;">MS UI Gothic</td>
                <td>Microsoft ユーザインタフェース用ゴシック。</td>
            </tr>
         </table>
      </body>
   </html>

各設定がどのように反映されているのかを考えてみると、テーブルの見栄えに関する指定の勉強にもなると思われます。

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

「とほほのWWW入門」の 逆引きリファレンスページでは、HTML4.01 以前の手法として、角の丸いテーブルは、下記のように 5種類の画像を用いて実現できると紹介されております。

rtbl1 rtbl5 rtbl2
rtbl5 本文・・・ rtbl5
rtbl3 rtbl5 rtbl4 
<!DOCTYPE html>
<html>
   <head>
      <meta lang="ja" charset="UTF-8">
      <title>サンプル</title>
      <style type="text/css">
      <!--
         TABLE.sample { border-collapse:collapse; }
         TABLE.sample, TABLE.sample TR, TABLE.sample TD {
             font-size: 1%; border-style: solid; border-color: #000000; border-spacing:0px;
             border-width:0px; padding:0px; margin:0px; 
         }
         TABLE.sample TD.normal { font-size: medium;  }
         IMG  {
             border-style: none; border-spacing:0px; border-width:0px; padding:0px; margin:0px; 
         }
      -->
      </style>
   </head>
   <body>
      <table class="sample">
        <tr>
          <td><img src="../image/rtbl1.gif" alt="rtbl1" height="20" width="20"></td>
          <td><img src="../image/rtbl5.gif" alt="rtbl5" height="20" width="100"></td>
          <td><img src="../image/rtbl2.gif" alt="rtbl5" height="20" width="20"></td>
        </tr>
        <tr>
          <td><img src="../image/rtbl5.gif" alt="rtbl5" height="50" width="20"></td>
          <td class="normal" style="background-image: url(../image/rtbl5.gif);">本文・・・</td>
          <td><img src="../image/rtbl5.gif" alt="rtbl5" height="50" width="20"></td>
        </tr>
        <tr>
          <td><img src="../image/rtbl3.gif" alt="rtbl3" height="20" width="20"></td>
          <td><img src="../image/rtbl5.gif" alt="rtbl5" height="20" width="100"></td>
          <td><img src="../image/rtbl4.gif" alt="rtbl4" height="20" width="20"></td>
        </tr>
      </table>
   </body>
</html>

確かに、実際これをIEで表示すると このように なります。

しかし、HTML5＋CSS3 では、このような面倒なことをしなくても簡単に角の丸いテーブルが作成できます。　また、さらに４つの角の丸みを個別に変えることも可能です。

それは、CSS3 では border-radius という便利なプロパティが用意されているからです。　ただし、非常に残念なことに IE8 はこのプロパティには未対応です。（最新のブラウザーでは対応済みにものがほとんどです。）

以下は、Firefox などの border-radiusプロパティに対応済みのブラウザーで表示してみてください。（IE9 は OK です。）


あああ いいい ううう
かかか ききき くくく
さささ ししし すすす 
<html>
   <head>
      <title>サンプル：角の丸いテーブル</title>
      <style type="text/css">
      <!--
         TABLE.radius { 
            border-style:solid; 
            border-width:10px; 
            border-color:green; 
            border-radius: 2em 0.6em 1em 0.3em; 
         }
         TABLE.radius TR, TABLE.radius TD {
            color: #ffffff; 
            background-color:#8484ee ;
         }
         TD.topl {  /* Top-Left */
            border-radius: 1.4em 0px 0px 0px;
            padding-left: 0.6em; 
         }
         TD.left {  /* Left */
            padding-left: 0.6em; 
         }
         TD.btmr {  /* Bottom-Right */
            border-radius: 0px 0px 0.4em 0px;
            padding-right: 0.35em;
         }
         TD.right { /* Right */
            padding-right: 0.35em;
         }
      -->
      </style>
   </head>
   <body>
      <table class="radius">
        <tr><td class="topl">あああ</td><td>いいい</td><td class="right">ううう</td></tr>
        <tr><td class="left">かかか</td><td>ききき</td><td class="right">くくく</td></tr>
        <tr><td class="left">さささ</td><td>ししし</td><td class="btmr">すすす</td></tr>
      </table>
   </body>
</html>