基本的なテーブル

■ テーブル（表）

■ テーブル（表）について

【メニュー項目】　次の各項目についての解説を参照してください。

基本的なテーブル
CSS でテーブルの標準的な枠線の表示を指定するには
CSS でテーブルの枠線の表示・非表示を指定するには
テーブルの中身を改行しないようにするには
テーブル内のフォントを一度に指定するには
カラム（セル）を連結（結合）するには
テーブルの幅や高さを指定するには
カラムの内容を右寄せ、左寄せするには
カラムの内容を上寄せ、下寄せするには
テーブルの背景色を指定するには
テーブルの背景画像を指定するには
テーブルを横に二つ並べるには
テーブルを左側に配置し後続文章を右側に回り込ませるには
テーブルを右側に配置し後続文章を左側に回り込ませるには
テーブルを中央に配置するには
テーブルの中にスタイルの異なるテーブルを表示には
枠線の太さを変えるには
枠線の色を変えるには
枠線をシンプルにするには
テーブルの枠線を点線にするには
杜甫々氏（とほほのWWW入門）ご愛用のテーブル
角の丸いテーブルを表示するには

■ 基本的なテーブル

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

<table>～</table> がひとつのテーブル
<caption>～</caption> が表題
<tr>～</tr> が1行
<th>～</th> がヘッダのセル
<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" （または、""） は枠線を表示する指定です。　（上のような標準的な枠線が表示されます。　ただし、"1" 以外の数値を指定することはできません。　枠線の太さや色を指定する場合には、CSS の borderプロパティ、または、border-style、 border-width、 border-color の３つのプロパティにより指定します。）

HTML4.01 までは、<table>要素 以外でも <img>要素や <object>要素でも border属性が指定できました。　HTML5 では、<img>要素や <object>要素では border属性は廃止されましたが、例外的に <table>要素 では、標準的な枠線を表示する簡便な指定方法として残されました。　ところが、HTML 4.01以降で、すでに、border属性は非推奨となっており、HTML5文法チェックサイト：http://html5.validator.nu/ では、「HTML5 では廃止されたので CSS による指定を使え」 との指示が出ます。

■ CSS でテーブルの標準的な枠線の表示を指定するには

上記のように、border属性で枠線表示をする方法は便利ですが、HTML 4.01以降 非推奨 となっています。　同様の枠線を CSS を使って表示するには、次のようにします。

まず、CSS の設定を、あらかじめ <head>～</head> 間に、

HTMLソース（CSS）
CSS <head> ～ </head>	<style type="text/css"> <!-- table { border: solid 1px #000000; border-collapse: separate; } th, td { border: solid 1px #000000; } --> </style>

のように書き込んでおきます。　次に、たとえば、

HTMLソース
HTML <body> ～ </body>	<table> <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>

HTMLソース

HTML
<body> ～ </body>

<table>
   <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> ～ </body> 間に記入すると、

ブラウザー表示例

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

のようなブラウザーでの表示が得られます。　ただし、この場合、テーブル個別に別のスタイルを指定しない限り、すべてのテーブルで border属性によるものと同様の枠線が表示されます。　従って、border属性のように、枠線の表示・非表示を簡単に切り替えることはできません。

一般的に、CSS によるスタイルを HTML の要素に簡単に適用するには、ここに示した型セレクタ (Type selector) を用いる方法以外にも、次に示すクラスセレクタ (Class selectors) とクラス属性を用いる方法や style属性を用いる方法があります。　しかし、最後の style属性を用いる方法では、<table>要素とテーブル内のほとんど全ての <th>要素， <td>要素に対して style属性の指定を行う必要があります。　つまり、それでなくてもテーブルでは複雑になるタグの記述がきわめて煩雑になってしまいます。　そのため、通常この指定方法は使用しません。　（おそらく、これが border属性が HTML5 でも残された理由ではないかと思われます。）

■ CSS でテーブルの枠線の表示・非表示を指定するには

上記の CSS による標準的な枠線の表示では、少し border属性による指定とは使い勝手が異なります。　CSS では、border-styleプロパティの初期値は "none" ですので、テーブルの枠線（より正確には、<table>要素，<th>要素，<td>要素の境界線）は表示されない設定になっています。　従って、border属性と同様の使い勝手にするには、CSS のクラスセレクタと子孫結合子（子孫セレクタ）を活用すれば、次のように簡単にできます。

まず、CSS の設定を、あらかじめ <head>～</head> 間に、たとえば、

HTMLソース（CSS）
CSS <head> ～ </head>	<style type="text/css"> <!-- table.border1 { border: solid 1px #000000; border-collapse: separate; } table.border1 th, table.border1 td { border: solid 1px #000000; } --> </style>

のように書き込んでおきます。　次に、 <body> ～ </body> 間に、クラス属性の指定： class="border1" を付けて、

HTMLソース　（枠線付きのテーブル）
HTML <body> ～ </body>	<table class="border1"> <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>

HTMLソース　（枠線付きのテーブル）

HTML
<body> ～ </body>

<table class="border1">
   <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>

のようにテーブルを記入すると、

ブラウザー表示例　（枠線付きのテーブル）

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

のようにブラウザーで枠線付きの表示が得られます。　また、クラス属性の指定： class="border1" を付けないで、

HTMLソース　（枠線なしのテーブル）
HTML <body> ～ </body>	<table> <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>

HTMLソース　（枠線なしのテーブル）

HTML
<body> ～ </body>

<table>
   <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> ～ </body> 間にテーブルを記入すると、

ブラウザー表示例　（枠線なしのテーブル）

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

のように枠線なしの表示が得られます。　ただし、HTML5 では、テーブルをレイアウト目的で使うことは認められていません ので、このような枠線なしのテーブルを使用する場面はそれほどないかもしれません。　そういう状況では、むしろ先に示した方法の方が便利かもしれません。

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

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

ああああああああああ	いいいいいいいいいい	うううううううううう

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

テーブル内のフォントの大きさや色を一度に指定するには、CSS の font（font-size，font-family，font-weight）や color などのプロパティを用います。　次の例を参考にしてください。

HTMLソース
CSS <head> ～ </head>	<style type="text/css" media="screen, print"> <!-- table.sample { border: solid 1px #000000; border-collapse: separate; } table.sample td, table.sample th { border: solid 1px #000000; color: red; font-size: 200%; font-family: "ＭＳゴシック"; } --> </style>
HTML <body> ～ </body>	<table class="sample"> <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>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css" media="screen, print">
<!--
   table.sample { 
      border: solid 1px #000000; 
      border-collapse: separate; 
   }
   table.sample td, table.sample th {
      border: solid 1px #000000;
      color: red;
      font-size: 200%;
      font-family: "ＭＳ ゴシック";
   }
-->
</style>

HTML
<body> ～ </body>

<table class="sample">
   <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>

ブラウザー表示例

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

上の基本的なテーブルと比べてみてください。

※ クラス名: "sample" は文書内でより適当な名前に変更してください。

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

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

横連結
縦連結	○○○
	□□□

<table>
 <tr><td colspan="2">横連結</td><!-- 空き --></tr>
 <tr><td rowspan="2">縦連結</td><td>○○○</td></tr>
 <tr><!-- ここは縦連結のため空き--><td>□□□</td></tr>
</table>

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

→

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

<table>
 <tr><td>東京都</td><td>12,345,678</td></tr>
 <tr><td>広島県</td><td>987,654</td></tr>
</table>

↓

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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 style="width:150px;">
 <tr><td>東京都</td><td>12,345,678</td></tr>
 <tr><td>広島県</td><td>987,654</td></tr>
</table>

↓

<table 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 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>

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

これは下寄せです。

これは上寄せです。

これは中央配置です。

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

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

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

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

＋

画像：colosseo.jpg

↓

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

<table 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>

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

ああ	ああ
ああ	ああ

ああ	ああ
ああ	ああ

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

ああ	ああ
ああ	ああ
いい	いい
いい	いい
うう	うう
うう	うう

ここで改行します。
改行しました。
{ float: left; } の場合，後続の文章は通常の <br> だけでは
この位置に改行されますが，<br> に style="clear:left;" とした
style属性を追加すると，行頭を表より下の左端（left）から表示できる
この位置に改行されます。

<table 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;">この位置に改行されます。

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

ああ	ああ
ああ	ああ
いい	いい
いい	いい
うう	うう
うう	うう

ここで改行します。
改行しました。
{ float: right; } の場合，後続の文章は通常の <br> だけでは
この位置に改行されますが，<br> に style="clear:right;" とした
style属性を追加すると，行頭を表より下の左端（left）から表示できる
この位置に改行されます。

<table 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;">この位置に改行されます。

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

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

※ 上のような枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

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

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

<table 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>

※ 上のようなセルの枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

■ 枠線の色を変えるには

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

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

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

<table 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>

※ 上のようなセルの枠線を表示するには、そのCSSの設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

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

<table 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の設定を、<head>～</head> 間に書き込んでおく必要があります。

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

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

HTMLソース
CSS <head> ～ </head>	<style type="text/css"> <!-- .dot, .dot th, .dot td { border-style: none; } .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>
HTML <body> ～ </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>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css">
<!--
   .dot, .dot th, .dot td { border-style: none; }
   .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>

HTML
<body> ～ </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>

ブラウザー表示例

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

※ <table>, <th>, <td> の３要素について、既定値でテーブルの枠線を表示する設定がされている場合には、上のように { border-style: none; } という指定で、リセットしておく必要があります。

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

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

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

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

HTMLソース
CSS <head> ～ </head>	<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>
HTML <body> ～ </body>	<table 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>

HTMLソース

CSS
<head> ～ </head>

<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>

HTML
<body> ～ </body>

<table 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>

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

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

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


	本文・・・

<!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>

■ テーブルの中にスタイルの異なるテーブルを表示には

たとえば、別項の角の丸いテーブルと杜甫々氏ご愛用のテーブル：

あああ	いいい	ううう
かかか	ききき	くくく
さささ	ししし	すすす

【Windows日本語フォント】
フォント名	説明
ＭＳゴシック	Microsoft 等幅ゴシック。
ＭＳ明朝	Microsoft 等幅明朝。
MS UI Gothic	Microsoft UI用ゴシック。

を、標準的なテーブル：

種　類	表　示
角の丸いテーブル	「角の丸いテーブル」を表示する場所
杜甫々氏ご愛用のテーブル	「杜甫々氏ご愛用のテーブル」を表示する場所

の対応するセルに収めて表示したいとします。　このとき、そのまま挿入すると、

種　類

表　示

角の丸いテーブル

あああ	いいい	ううう
かかか	ききき	くくく
さささ	ししし	すすす

杜甫々氏ご愛用の
テーブル

【Windows日本語フォント】
フォント名	説明
ＭＳゴシック	Microsoft 等幅ゴシック。
ＭＳ明朝	Microsoft 等幅明朝。
MS UI Gothic	Microsoft UI用ゴシック。

（セル内の ２つのテーブルのセル境界線 が．．．．．！）

のようになってしまいます。　あれれ！！！？？？　セルの境界線の表示スタイル が本来のものとは異なっています。　これは、内側の２つの <table>要素の <th>要素や <td>要素では、いずれも 外側のテーブルで設定した <th>要素や <td>要素に対するスタイルが適用されている ためです。　ただし、この２つでは、原因が少し異なります。

まず、外側のテーブルのスタイルは、

<style type="text/css">
<!--
   table.border1 { 
      border: solid 1px #000000; 
      border-collapse: separate; 
   }
   table.border1 th, table.border1 td { 
      border: solid 1px #000000; 
   }
-->
</style>

のようになっています。　また、その後に記述した角の丸いテーブルの <th>要素と <td>要素のスタイルは、

         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;
         }

のようになっています。　これを見ると、border-style プロパティの指定は一切なく、初期値 "none" をそのまま利用することによって、{ border-style: none; } を指定する形になっています。　従って、外側のテーブルの border-style プロパティの値 "solid" や border-width プロパティの値 "1px"、border-color プロパティの値 "#000000" が適用された結果、上のような表示となっているのです。　これは、容易に修正可能で、

         TABLE.radius TR, TABLE.radius TD {
            border-style: none;
            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;
         }

のように明示的に、border-style プロパティの値: "none" を指定すればＯＫです。　（ただし、次に述べるとおり、 "radius"クラスの定義が "border1"クラスの定義より後に記述されていること が前提条件です。）

一方、杜甫々氏ご愛用のテーブル：のスタイルは、

         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;
         }

のようになっています。　よく見ても、とくに CSS によるスタイル指定がもれているところはなさそうです。　にもかかわらず、外側のテーブルのスタイルが適用されているのは、この杜甫々氏ご愛用のテーブルの <th>要素と <td>要素では、外側のテーブルの "border1"クラスによるスタイルとこのテーブルの "kw"クラスによるスタイルが、ともに指定された形 になっているからです。

クラス属性の解説にあるとおり、この場合、後に定義したクラスのスタイル指定が優先 されます。　実は、"kw"クラス の定義は外部 CSS ファイル内に記述してあるため、ページ内で CSS を記述した "border1"クラス の方が後から定義されています。　そのため、"border1"クラス のスタイル指定が優先されて、上のような表示となるのです。　これを避けるためには、<th>要素と <td>要素について、

"border1"クラス も外部 CSS ファイルのスタイル指定に含めて、"kw"クラス より前に記述する。
ページ内の CSS の指定で、"kw"クラス と同じスタイル（のクラス）を "border1"クラス より後に記述して適用する。

のどちらかで対処できます。　一般的には、方法1 の方がベターです。　しかし、このページはちょっと特殊で、上のような望ましくない表示状態も一緒に示したいので、方法2 で対処しました。　その結果が次のものです。

種　類

表　示

角の丸いテーブル

あああ	いいい	ううう
かかか	ききき	くくく
さささ	ししし	すすす

杜甫々氏ご愛用の
テーブル

【Windows日本語フォント】
フォント名	説明
ＭＳゴシック	Microsoft 等幅ゴシック。
ＭＳ明朝	Microsoft 等幅明朝。
MS UI Gothic	Microsoft UI用ゴシック。

（セル内の２つのテーブルは、いずれも本来のスタイルで表示されています。）