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>
次のセクション