表 (CSS)


表の位置

画面の中央に表示

 表の位置を画面の中央に表示するには、margin-left, margin-right を両方とも auto に設定します。

<table style="margin-left: auto; margin-right: auto;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2

表の左側に余白を入れる

 表の左側に余白を入れるには、margin-leftを使います。

<table style="margin-left: 3cm">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2

表の上下に余白を入れる

 表の上下に余白を入れて、文章から少し離すには、margin-top, margin-bottom を使います。

<table style="margin-top: 1cm; margin-bottom: 1cm;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
*********************
A1B1C1
A2B2C2
*********************

表を横に並べて表示する

 表を横に並べて表示するには、floatを使います。横に並べるモードを元にもどすには clear属性 を使います。

<table style="float:left; margin-right: 8px;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
<table style="clear: left; margin-top: 8px;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2
A1B1C1
A2B2C2
A1B1C1
A2B2C2

 

表のサイズ

表の横幅

 表の横幅は width 属性で指定します。絶対値(px, cmなど)の他に、画面に対する相対値(%)でも指定できます。

<table style="width:400px;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
<br />
<table style="width:50%;">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2

A1B1C1
A2B2C2

セルの幅や高さ

 セルの幅や高さは width, height 属性で指定します。属性はどれかのセルだけ指定すればよく、全部のセルに設定する必要はありません。

<table>
<tr><td style="width: 3cm;">A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td style="width: 2cm; height: 1cm;">C2</td></tr>
</table>
A1B1C1
A2B2C2

 

罫線の指定方法

 HTMLテーブルの罫線はtableタグとtdタグで個別に指定されます。これらの間には少し隙間があるので、デフォルトでは罫線が二重線のように表示されます。なお、デフォルトでは罫線は"none"に設定されているので表示されません。表示するためには、スタイルの設定が必要です。

HTML table
Fig.1 HTMLテーブルの構造

罫線の幅、色、スタイル

 罫線の幅、色、スタイルはdivタグなどと同じborder属性で指定します。色を指定することで、非表示だった罫線が表示されるようになります。

 border-collapse: initial;としているのは、このページの最初のstyleタグ内でborder-collapse: collapse;としているため、tableとtdのデフォルトの距離がわかるように初期値に戻しています。

table.blue {
  border-collapse: initial;
  border: solid medium blue;
}

td.navy {
  border-collapse: initial;
  border: solid medium navy;
}

HTMLの表の説明も参考になります。


罫線どうしの距離

 上の図(Fig.1)のようにデフォルトでは、罫線どうしは離れています。この距離を制御するには、border-spacing属性を使います。完全に罫線どうしを重ねて1本の線のようにするには、border-collapse属性を使用します。

 border-collapse: initial;としているのは、このページの最初のstyleタグ内でborder-collapse: collapse;としているため、一旦、初期値に戻しています。

 下の例は、border-spacing を 0 にして罫線どうしをくっつけています。

table.nospace {
  border-spacing: 0;
  border-collapse: initial;
  border: solid medium black;
}

td.nospace {
  border-spacing: 0;
  border-collapse: initial;
  border: solid medium gray;
}
A1B1C1
A2B2C2

 罫線どうしを完全に重ねてしまうには、border-collapse: collapse を設定します。このページの下のようにtable, tdはcollapseに設定してあります。

table, td {
  border: thin gray solid;
  border-collapse: collapse;
}
A1B1C1
A2B2C2

 

背景の指定方法

テーブル全体の背景

 テーブルの背景も一般の領域の背景同様、background-colorやbackground-imageをして設定します。tableの背景色を変更するとセルの中身も含めてその背景になります。

table.b1, td.b1 {
  background-color: silver;
  border: solid medium black;
}

<table class="b1">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2

 画像を背景にすることもできます。その場合は、background-colorの代わりにbackground-imageを使います。そのとき、画像の指定はurl()関数を使って指定します。

table.im, td.im {
  background-image: url("back-green.png");
  border: solid medium black;
}

<table class="im">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
A1B1C1
A2B2C2

行の背景

 trに背景色を設定すると、その行全体がその背景色になります。個別のセルの背景は、tdに対して設定します。

table.b0, td.b0 {
  background-color: initial;
  border: solid medium black;
}

tr.y1 {
  background-color: yellow;
}

<table class="b0">
<tr class="y1"><td class="b0">A1</td><td class="b0">B1</td><td class="b0">C1</td></tr>
<tr><td class="b0">A2</td><td class="b0">B2</td class="b0"><td class="b0">C2</td></tr>
</table>
A1B1C1
A2B2C2

列の背景

 列全体の背景を変更するには、HTMLのcolgroupタグ(とcolタグ)を使用します。colgroupにbckground-color, background-imageを適用することにより列全体の背景が変更できます。詳しくはHTMLのcolgroup参照。

 

セル内の文字列の整列

横方向

 セル内の文字列の横方向の整列ですが、text-align属性を使用します。

<table class="b0" style="width:50%">
<tr><td class="b0" style="text-align:center">A1</td><td class="b0" style="text-align:center">B1</td><td class="b0">C1</td></tr>
<tr><td class="b0" style="text-align:right">A2</td><td class="b0" style="text-align:right">B2</td><td class="b0">C2</td></tr>
</table>
A1B1C1
A2B2C2

たて方向

 たて方向の文字列の位置ですが、vertical-align属性で設定します。

<table class="b0" style="width:50%">
<tr><td class="b0" style="height:2cm;vertical-align:top">A1</td><td class="b0" style="vertical-align:middle">B1</td><td class="b0" style="vertical-align:bottom">C1</td></tr>
<tr><td class="b0" style="text-align:right">A2</td><td class="b0" style="text-align:right">B2</td><td class="b0">C2</td></tr>
</table>
A1B1C1
A2B2C2

 下の表はvertical-alignが取ることができる値の一覧です。表では無視される値もあります。

vertical-align意味
baseline文字のベースライン
数値ベースラインからの距離 (例) 4px;
%ベースラインからの距離 (例) 4%;
sub下付き文字(tdでは使用不可)
super上付き文字(tdでは使用不可)
top上揃え
text-topテキストの上揃え(tdでは使用不可)
middle中央揃え
bottom下揃え
text-bottomテキストの下揃え(tdでは使用不可)
initial初期値(baseline)
inherit継承した値

 

罫線からの距離の指定

 文字列を罫線から少し離したいときは、paddingを使用します。

<table class="b0" style="width:50%">
<tr><td class="b0" style="padding-left:10px;">A1</td><td class="b0">B1</td><td class="b0" style="padding: 10px;">C1</td></tr>
<tr><td class="b0" style="padding:10px;">A2</td><td class="b0">B2</td><td class="b0">C2</td></tr>
</table>
A1B1C1
A2B2C2

空のセルを隠す

 empty-cells属性を使うと空のセルを表示しないようにできます。空のセルを表示しないようにするには、tableタグのスタイルでempty-cells: hideと設定します。

<table style="border: solid thin gray; empty-cells: hide; border-collapse:initial;">
<tr><td style="border: solid thin gray;border-collapse:initial;">A1</td><td style="border: solid thin gray;border-collapse:initial;"></td></tr>
<tr><td style="border: solid thin gray;border-collapse:initial;"></td><td style="border: solid thin gray;border-collapse:initial;">B2</td></tr>
</table>
A1
B2

 

このページの先頭へ戻る