CSS テーブル

使用 CSS 可以极大地改善 HTML 表格的外观：

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

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

テーブル枠

CSSでテーブルの枠を設定するには、 border 属性。

以下は<table>、<th>および<td>要素に黑色の枠を設定する例です：

Firstname Lastname
Bill Gates
Steve Jobs

例

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

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

注意：上の例のテーブルには双边框があります。これはtableと<th>および<td>要素がそれぞれ独立した枠を持っているためです。

全幅テーブル

場合によっては、上のテーブルが小さく見えることがあります。全体のスクリーン（全幅）を覆うテーブルが必要な場合は、<table>要素にwidth: 100%を追加してください：

例

table {
  width: 100%;
}

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

双边框

注意：上のテーブルには双边框があります。これはテーブルとth、td要素がそれぞれ独立した枠を持っているためです。

双边框を削除するには、以下の例を参照してください。

テーブル枠の統合

border-collapse 属性を使用してテーブルの枠を一つの枠に折り畳みますかどうかを設定します：

Firstname Lastname
Bill Gates
Steve Jobs

例

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

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

テーブルの周りに枠を希望する場合のみ、<table>に指定してください： border padding

Firstname Lastname
Bill Gates
Steve Jobs

例

table {
  border: 1px solid black;
}

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

テーブル幅と高さ

テーブルの幅と高さは width および height 属性定義。

以下は、テーブルの幅を100％に設定し、<th>要素の高さを50pxに設定する例です：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

table {
  width: 100%;
}
th {
  height: 50px;
}

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

ページの半分だけを占めるテーブルを作成するには、width: 50%を使用してください：

例

table {
  width: 50%;
}
th {
  height: 70px;
}

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

水平アライメント

text-align 属性を使用して<th>または<td>内の内容の水平アライメント（左、右、または中央）を設定します。

デフォルトでは、<th>要素内の内容は中央にアライメントしており、<td>要素内の内容は左にアライメントしています。

<td>要素内の内容も中央にアライメントするには、text-align: centerを使用してください：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

th {
  text-align: center;
}

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

以下は、<th>要素内のテキストを左にアライメントする例です：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

th {
  padding: 15px;
}

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

垂直アライメント

vertical-align 属性を使用して<th>または<td>内の内容の垂直アライメント（上、下、または中央）を設定します。

デフォルトでは、テーブル内の内容の垂直アライメントは中央です（<th>および<td>要素とも）。

以下は、<td>要素の垂直テキストアライメントを下に設定する例です：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

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

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

表格内边距

テーブル内余白 テーブル内余白を制御するために、<td> と <th> 要素に padding

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

属性を使用して、水平の分断線を実現します：
  属性：
  padding: 15px;
}

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

text-align: left;

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

水平の分断線 向 <th> と <td> に追加して、 border-bottom

例

属性を使用して、水平の分断線を実現します：
  th, td {
}

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

border-bottom: 1px solid #ddd;

可動テーブル 選択子を使用して、マウスオーバー時のテーブル行をハイライト表示します： :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

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

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

ストライプテーブル

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

スポットテーブル効果を実現するために、 nth-child() 選択子を指定し、すべての偶数（または奇数）行のテーブル行に background-color：

例

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

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

テーブルの色

以下では、<th>要素の背景色とテキスト色を指定しています：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

例

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

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

レスポンシブテーブル

全ての内容を表示できないほど小さいスクリーンでは、レスポンシブテーブルに水平スクロールバーが表示されます：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

<table>要素の周りに、 overflow-x:auto のコンテナ要素（例えば<div>）を指定することで、レスポンシブな効果を実現します：

例

<div style="overflow-x:auto;">
<table>
...テーブルの内容...
</table>
</div>

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

注記：OS X Lion（Mac上で）では、スクロールバーはデフォルトで非表示で、使用時にのみ表示されます（"overflow:scroll"が設定されていても同じです）。

さらに多くの例

花柄のテーブルを作成する
この例では、花柄のテーブルを作成する方法を示しています。
テーブルのタイトルの場所を設定する
この例では、テーブルのタイトルをどう配置するかを示しています。

CSS テーブル属性

属性 説明
border ショートカット属性。すべての枠属性を一つの宣言で設定します。
border-collapse テーブルの枠を折りたたむかどうかを指定します。
border-spacing 隣接セル間の枠の距離を指定します。
caption-side テーブルのタイトルの場所を指定します。
empty-cells テーブルの空白セルに枠と背景を表示するかどうかを指定します。
table-layout テーブルのレイアウトアルゴリズムを設定する。