CSSテーブル

CSS テーブル

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

CSS テーブルプロパティ

CSS テーブルプロパティは、テーブルの外観を大幅に改善するのに役立ちます。

表の境界線

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

次の例では、table、th、td に青い境界線を設定します:

table, th, td

{

border: 1px Solid blue;

}

上記の例のテーブルには二重線があることに注意してください国境。これは、table、th、td 要素に独立した境界線があるためです。

表を単一線の境界線として表示する必要がある場合は、border-collapse 属性を使用してください。

境界線を折り畳む

border-collapseプロパティは、テーブルの境界線を単一の境界線に折りたたむか、間隔をあけて配置するかを設定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

テーブルの幅と高さ

Widthプロパティと高さプロパティは、幅と高さを定義します表の。

次の例は、番目の要素に幅 100%、高さ 50 ピクセルを設定するテーブルです:

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

テーブルのテキスト配置

テーブル内のテキスト配置と垂直配置のプロパティ。

text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}

垂直配置プロパティは、上、下、中央などの垂直配置を設定します:

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

テーブルのパディング

テーブルのコンテンツ内のスペース間の境界線を制御したい場合は、次のパディングプロパティを使用する必要があります。 td と th 要素:

td
{
padding:15px;
}

テーブルの色

次の例では、境界線の色、および th 要素のテキストと背景の色を指定します

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:pink;
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"> <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>

提出するリセットコード

自動運転