テーブル

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

基本的なテーブル

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

HTML
<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 属性を指定します。

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

最近では、nowrap属性の代わりにスタイルシートの white-space: nowrap を指定することが推奨されています。

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

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

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

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

カラム(セル)を連結(結合)するには

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

HTML
<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属性の代わりに、スタイルシートの widthheight を使用することが推奨されています。

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

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

<tr><th><td> に align 属性、またはスタイルシートの text-align を指定することで、カラムの内容を右寄せ、中寄せ、左寄せすることができます。

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

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

<tr><th><td> に valign 属性、またはスタイルシートの vertical-align を指定することで、カラムの内容を上に寄せたり、下に寄せたりすることができます。

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

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

<table>、<tr>、<th>、<td> の bgcolor 属性、またはスタイルシートの background-color を用いて、テーブルの背景色を指定することができます。

HTML
<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>
表示
■■●●
□□◎◎
◇◇○○

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

<table>、<tr>、<th>、<td> の background 属性、またはスタイルシートの background-image を用いて、テーブルの背景画像を指定することができます。

HTML
<table border=1 style="background-image:url(xxx.gif);">
 <tr><th>■■</th><th>●●</th></tr>
 <tr><td>□□</td><td>◎◎</td></tr>
 <tr><td>◇◇</td><td>○○</td></tr>
</table>
表示
■■●●
□□◎◎
◇◇○○

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

テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブルを設ける方法があります。

HTML
<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>
表示
ああああ
ああああ
ああああ
ああああ

もしくは、スタイルシートの float を用いる方法があります。

HTML
<table border=1 style="float:left">
 <tr><td>ああ</td><td>ああ</td></tr>
 <tr><td>ああ</td><td>ああ</td></tr>
</table>
<table border=1>
 <tr><td>ああ</td><td>ああ</td></tr>
 <tr><td>ああ</td><td>ああ</td></tr>
</table>

枠線の色を変えるには

テーブルの枠線の色を変えるには、<table> の bordercolor属性、またはスタイルシートの border-color を指定します。

HTML
<table border=1 style="border-color:#cc0000;">
  :
</table>

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

テーブルの枠線をシンプルにするには、<table> の cellspacing属性、またはスタイルシートの border-collapse を指定します。

HTML
<table border=1 style="border-collapse:collapse;">
 <tr"><th">■■</th"><th">●●</th"></tr">
 <tr"><td">□□</td"><td">◎◎</td"></tr">
 <tr"><td">◇◇</td"><td">○○</td"></tr">
</table">
表示
■■●●
□□◎◎
◇◇○○

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

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

<html>
<head>
<title>サンプル</title>
<style type="text/css">
<!--
.dot { border-collapse: collapse; }
.dot th, .dot td { border: 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>

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

角の丸いテーブルは、スタイルシートの border-radius を用いて実現します。IE9 からサポートしています。

HTML
<table border=1 style="border:1px solid black; border-radius:8px; border-collapse:separate; border-spacing:8px;">
<tr><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td></tr>
</table>
表示
AAAAAA
AAAAAA

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