CSSテーブル

CSS を使用すると、HTML テーブルの外観を大幅に改善できます。

自分で試してみてください

表の境界線

CSS で表の境界線を設定するには、border プロパティを使用します。

次の例では、<table>、<th>、および <td> 要素に黒い境界線を指定します。

实例

table, th, td {
  border: 1px solid black;
}

自分で試してみてください

注: 上の例の表には二重枠があります。 これは、table と <th> および <td> 要素に別々の境界線があるためです。

全幅の表

場合によっては、上の表が小さく見えるかもしれません。 画面全体 (全幅) をカバーする表が必要な場合は、<table> 要素に width: 100% を追加します。

例

table {
  width: 100%;
}

自分で試してみてください

二重枠

上の表には二重枠があることに注意してください。 これは、table 要素と th、td 要素に別々の境界線があるためです。

二重枠を削除するには、以下の例を参照してください。

表の境界線を結合する

border-collapse 属性は、テーブルの境界線を単一の境界線に折りたたむかどうかを設定します。

例

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

自分で試してみてください

テーブルの周囲に境界線だけが必要な場合は、<table> の border 属性を指定するだけです。

例

table {
  border: 1px solid black;
}

自分で試してみてください

テーブルの幅と高さ

テーブルの幅と高さは、width 属性と height 属性によって定義されます。

次の例では、テーブルの幅を 100% に設定し、<th> 要素の高さを 50 ピクセルに設定します。

例

table {
  width: 100%;
}

th {
  height: 50px;
}

自分で試してみてください

ページの半分だけを占める表を作成するには、width: 50% を使用します。

例

table {
  width: 50%;
}

th {
  height: 70px;
}

自分で試してみてください

水平方向の配置

text-align 属性は、<th> または <td> 内のコンテンツの水平方向の配置 (左、右、または中央) を設定します。

デフォルトでは、<th> 要素のコンテンツは中央揃えで、<td> 要素のコンテンツは左揃えです。

<td> 要素のコンテンツも中央揃えにするには、text-align: center: を使用します。

例

th {
  text-align: center;
}

自分で試してみてください

次の例では、<th> 要素内のテキストを左揃えにしています。

例

th {
  text-align: left;
}

自分で試してみてください

垂直方向の配置

vertical-align 属性は、<th> または <td> 内のコンテンツの垂直方向の配置 (上、下、または中央) を設定します。

デフォルトでは、表内のコンテンツの垂直方向の配置は中央揃えになります (<th> 要素と <td> 要素の両方)。

次の例では、<td> 要素の垂直方向のテキスト配置を下に設定します。

例

td {
  height: 50px;
  vertical-align: bottom;
}

自分で試してみてください

表のパディング

境界線と表のコンテンツの間の間隔を制御するには、<td> 要素と <th> 要素の padding 属性を使用します。

例

th, td {
  padding: 15px;
  text-align: left;
}

自分で試してみてください

水平分割線

水平分割線の border-bottom 属性を <th> と <td> に追加します。

例

th, td {
  border-bottom: 1px solid #ddd;
}

自分で試してみてください

ホバリング可能なフォーム

<tr> 要素の :hover セレクターを使用して、ホバー時にテーブルの行を強調表示します。

例

tr:hover {background-color: #f5f5f5;}

自分で試してみてください

ストリップフォーム

ゼブラ テーブル効果を実現するには、nth-child() セレクターを使用し、テーブルのすべての偶数 (または奇数) 行に background-color を追加してください。 < /p>

例

tr:nth-child(even) {background-color: #f2f2f2;}

自分で試してみてください

テーブルの色

次の例では、<th> 要素の背景色とテキストの色を指定します。

例

th {
  background-color: #4CAF50;
  color: white;
}

自分で試してみてください

レスポンシブフォーム

画面が小さすぎてコンテンツ全体を表示できない場合、レスポンシブ テーブルには水平スクロールバーが表示されます。

レスポンシブ効果を得るには、overflow-x:auto を使用して <table> 要素の周囲にコンテナ要素 (例: <div>) を追加します。

例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

自分で試してみてください

注: OS X Lion (Mac 上) では、スクロールバーはデフォルトで非表示になり、(「overflow :scroll」を使用した場合でも) 使用時のみ表示されます。

CSS テーブル属性