CSSテーブル
CSS テーブル
CSS を使用すると、HTML テーブルの外観を大幅に改善できます。例:
| 会社 | 連絡先 | 国 |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Berglunds snabbköp | クリスティーナ・ベルグルンド | スウェーデン |
| セントロ・コマーシャル・モクテズマ | フランシスコチャン | メキシコ |
| エルンスト・ヘンデル | ローランド・メンデル | オーストリア |
| アイランド・トレーディング | ヘレン・ベネット | 英国 |
| ケーニグリッヒ・エッセン | フィリップ・クレイマー | ドイツ |
| 笑うバッカス・ワインセラーズ | ヨシ・タンナムリ | カナダ |
| マガッツィーニ・アリメンタリ・リウニティ | ジョバンニ・ロヴェッリ | イタリア |
| 北/南 | サイモン・クラウザー | 英国 |
| パリのスペシャリティ | マリー・ベルトラン | フランス |
| ザ・ビッグ・チーズ | リズ・ニクソン | アメリカ |
| ヴァッフェルジャーネット | パル・イプセン | デンマーク |
テーブルの境界線
border属性を使用してCSSテーブルの境界線を指定します。
次の例では、テーブルの Th 要素と TD 要素に黒い境界線を指定します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
お願いします上記の例のテーブルには二重枠があることに注意してください。これは、table 要素と th/td 要素に別々の境界があるためです。
表の単一の境界線を表示するには、border-collapse プロパティを使用します。
ボーダーを折りたたむ
border-collapse プロパティは、テーブルのボーダーを単一のボーダーに折りたたむか分割するかを設定します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックして表示しますオンライン インスタンス
テーブルの幅と高さ
幅と高さのプロパティは、テーブルの幅と高さを定義します。
次の例は、要素の幅を 100%、高さを 50 ピクセルに設定するテーブルです:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして表示します。オンラインの例
表のテキストの配置
表内のテキストの配置と垂直方向の配置のプロパティ。
text-align プロパティは、左、右、中央などの水平方向の配置を設定します:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
垂直配置プロパティの設定 上、下、中央などの垂直配置:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
テーブルの入力
テーブルのコンテンツ内のコントロールスペース td 要素と th 要素の間の境界は、padding 属性で埋める必要があります:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>Run Example»
オンラインで表示するには、[Run Example] ボタンをクリックします。例
テーブルの色
以下の例 境界線の色、および 番目の要素のテキストと背景の色を指定します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>例を実行する»
「例を実行」をクリックしますオンラインの例を表示するボタン
その他の例
インスタンス: パーソナライズされたフォームを作成します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
このサンプルは、パーソナライズされたフォームの作成方法を示します。
例: テーブルのタイトルの位置を設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
<p><b>注意:</b>如果!DOCTYPE指定IE8支持caption-side属性 .</p>
</body>
</html>サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
この例は、テーブルのタイトルを配置する方法を示します。
