プログラミング言語 Web関連 css3 CSS テーブル スタイル (表)

CSS テーブル スタイル (表)

 
 
Web ページでは通常、表を使用して成績表や財務諸表などのデータを表示しますが、デフォルトでは、表のスタイルは美しくないか、ページのスタイルに適合していません。 CSS には、テーブルのスタイルを変更してテーブルの外観を大幅に改善できるプロパティがあります。

 

  • table-layout: テーブルのレイアウト アルゴリズムを設定します. 固定テーブル レイアウト アルゴリズムと自動テーブル レイアウト アルゴリズムの 2 つのレイアウト アルゴリズムがあります。
  • border-collapse: テーブル内のセルの境界線を結合するか、標準の HTML スタイルに従って分離するかを設定します。
  • border-spacing: 表の境界線が分離されている場合に、隣接する 2 つの境界線の間の水平および垂直方向の間隔を設定します。
  • caption-side: テーブルに対するテーブル タイトルの位置を設定します。
  • empty-cells: 表のセルに内容がない場合、セルの枠線を表示するかどうかを設定します。

1. table-layout

table-layout 属性は、テーブル レイアウトで使用されるレイアウト アルゴリズムを設定するために使用されます. 属性のオプション値は次のとおりです:

価値 説明
automatic デフォルト値のカスタム テーブル レイアウトは、テーブルの各列の幅がセルの内容に依存することを意味します。
fixed 固定テーブル レイアウト。つまり、テーブルの幅は、列の幅、セルの境界線、セル間の間隔などの要因によって決定されます。
inherit 親要素から table-layout 属性の値を継承する

1) 固定テーブル レイアウト

固定テーブル レイアウトにより、ブラウザーはテーブルをより迅速にレイアウトできます。固定テーブル レイアウトでは、テーブルの水平幅は、列幅、テーブル ボーダー幅、セル間隔などの要因のみに依存し、セル内のコンテンツとは関係ありません。つまり、テーブルの幅を超えるテーブル内のコンテンツは無視される場合があります。

2) 自動テーブルレイアウト

自動テーブル レイアウトでは、列の幅はセルのコンテンツ (改行のない最も広いコンテンツ) によって異なります。つまり、セルの幅が 100px であるが、セルのコンテンツが占める幅の方が大きい場合です。これにより、セルのコンテンツがセルを拡張します。この機能のため、このアルゴリズムは遅くなる場合があります。

2.boder-collapse

テーブル内の隣接する境界線をマージするかどうかを設定するには、border-collapse 属性を使用します。この属性のオプションの値は次のとおりです。

価値 説明
seprate デフォルトでは、隣接する 2 つの境界線が分離されています。これを使用しても、border-spacing および empty-cells プロパティは無視されません。
collapse 隣接する 2 つの境界線は 1 つの境界線にマージされます。これを使用すると、border-spacing および empty-cells プロパティが無視されます。
inherit 親要素から border-collapse プロパティの値を継承する

[例] セルの境界線を結合または分割するには、border-collapse プロパティを使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田太郎</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木次郎</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-collapse プロパティのデモ
図: border-collapse プロパティのデモ

デフォルトでは表のボーダーは非表示になっているため、上記の例では<table>タグの border 属性を使用してボーダーを表示する必要があります. また、CSS の border 属性を使用してボーダーを設定することもできます.以下に示すように、テーブルの場合:

 table、th、td {
    boder:1px solid black;

3.border-spacing

border-spacing 属性は、隣接するセルの境界間の距離を設定でき (border-collapse 属性が別の場合にのみ有効)、その効果は<table>タグの cellspacing 属性と同等です (つまり、 border-spacing:0; cellspacing="0"で同等)。 border-spacing プロパティの構文は次のとおりです。

ボーダー間隔: 長さの長さ;

パラメータの長さは、隣接するセルの境界線間の距離を示す値と単位で構成され、オプションの値は次のとおりです。

価値 説明
length 隣接する境界線間の距離を値プラス単位 (2px など) で設定します。負の値は使用できません。長さパラメータが 1 つだけ定義されている場合、この値は水平方向と垂直方向の間隔に同時に作用します。2 つの長さパラメータが同時に定義されている場合、最初の長さパラメータは隣接する境界線の水平方向の間隔を示し、 2 番目の長さパラメーターは、隣接する境界線の垂直方向の間隔を示します
inherit 親要素から border-spacing プロパティの値を継承する

[例] border-spacing プロパティを使用して、テーブル内の隣接する境界線間の間隔を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-spacing: 15px 10px;
        }
        .table_two {
            margin-left: 20px;
            border-spacing: 20px;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-spacing プロパティのデモ
図: border-spacing プロパティのデモ

4. caption-side

caption-side 属性はテーブル タイトルの位置を設定でき、属性のオプション値は次のとおりです。

価値 説明
top デフォルトでは、テーブル ヘッダーをテーブルのすぐ上に配置します
bottom テーブル ヘッダーをテーブルのすぐ下に配置する
inherit 親要素からキャプション側属性の値を継承する

【例】表タイトルの位置をキャプションサイド属性で設定する場合:

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            caption-side: top;
        }
        .table_two {
            margin-left: 20px;
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: キャプション側属性のデモ
図: キャプション側属性のデモ
5.空のセル

empty-cells 属性は、セルにコンテンツがない場合に空のセルを表示するかどうかを設定するために使用され (border-collapse 属性が別の場合にのみ有効)、属性のオプション値は次のとおりです。 :

価値 説明
hide 空のセルの境界線を非表示にする
show デフォルトでは、空のセルの周囲に境界線が表示されます
inherit 親要素から empty-cells 属性の値を継承する

【例】 empty-cells属性で空のセルを非表示にするかどうかを設定する。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            empty-cells: hide;
        }
        .table_two {
            margin-left: 20px;
            empty-cells: show;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: empty-cells プロパティのデモ
図: empty-cells プロパティのデモ
 

「CSS テーブル スタイル (表)」についてわかりやすく解説!絶対に観るべきベスト2動画

【初心者向け】table(テーブル)のコーディングを基礎から徹底解説!HTML編【HTML・CSS コーディング】
HTML入門講座 #07:表(テーブル) table, tr, th, td タグ
 
 
Web ページでは通常、表を使用して成績表や財務諸表などのデータを表示しますが、デフォルトでは、表のスタイルは美しくないか、ページのスタイルに適合していません。 CSS には、テーブルのスタイルを変更してテーブルの外観を大幅に改善できるプロパティがあります。

 

  • table-layout: テーブルのレイアウト アルゴリズムを設定します. 固定テーブル レイアウト アルゴリズムと自動テーブル レイアウト アルゴリズムの 2 つのレイアウト アルゴリズムがあります。
  • border-collapse: テーブル内のセルの境界線を結合するか、標準の HTML スタイルに従って分離するかを設定します。
  • border-spacing: 表の境界線が分離されている場合に、隣接する 2 つの境界線の間の水平および垂直方向の間隔を設定します。
  • caption-side: テーブルに対するテーブル タイトルの位置を設定します。
  • empty-cells: 表のセルに内容がない場合、セルの枠線を表示するかどうかを設定します。

1. table-layout

table-layout 属性は、テーブル レイアウトで使用されるレイアウト アルゴリズムを設定するために使用されます. 属性のオプション値は次のとおりです:

価値 説明
automatic デフォルト値のカスタム テーブル レイアウトは、テーブルの各列の幅がセルの内容に依存することを意味します。
fixed 固定テーブル レイアウト。つまり、テーブルの幅は、列の幅、セルの境界線、セル間の間隔などの要因によって決定されます。
inherit 親要素から table-layout 属性の値を継承する

1) 固定テーブル レイアウト

固定テーブル レイアウトにより、ブラウザーはテーブルをより迅速にレイアウトできます。固定テーブル レイアウトでは、テーブルの水平幅は、列幅、テーブル ボーダー幅、セル間隔などの要因のみに依存し、セル内のコンテンツとは関係ありません。つまり、テーブルの幅を超えるテーブル内のコンテンツは無視される場合があります。

2) 自動テーブルレイアウト

自動テーブル レイアウトでは、列の幅はセルのコンテンツ (改行のない最も広いコンテンツ) によって異なります。つまり、セルの幅が 100px であるが、セルのコンテンツが占める幅の方が大きい場合です。これにより、セルのコンテンツがセルを拡張します。この機能のため、このアルゴリズムは遅くなる場合があります。

2.boder-collapse

テーブル内の隣接する境界線をマージするかどうかを設定するには、border-collapse 属性を使用します。この属性のオプションの値は次のとおりです。

価値 説明
seprate デフォルトでは、隣接する 2 つの境界線が分離されています。これを使用しても、border-spacing および empty-cells プロパティは無視されません。
collapse 隣接する 2 つの境界線は 1 つの境界線にマージされます。これを使用すると、border-spacing および empty-cells プロパティが無視されます。
inherit 親要素から border-collapse プロパティの値を継承する

[例] セルの境界線を結合または分割するには、border-collapse プロパティを使用します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田太郎</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木次郎</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-collapse プロパティのデモ
図: border-collapse プロパティのデモ

デフォルトでは表のボーダーは非表示になっているため、上記の例では<table>タグの border 属性を使用してボーダーを表示する必要があります. また、CSS の border 属性を使用してボーダーを設定することもできます.以下に示すように、テーブルの場合:

 table、th、td {
    boder:1px solid black;

3.border-spacing

border-spacing 属性は、隣接するセルの境界間の距離を設定でき (border-collapse 属性が別の場合にのみ有効)、その効果は<table>タグの cellspacing 属性と同等です (つまり、 border-spacing:0; cellspacing="0"で同等)。 border-spacing プロパティの構文は次のとおりです。

ボーダー間隔: 長さの長さ;

パラメータの長さは、隣接するセルの境界線間の距離を示す値と単位で構成され、オプションの値は次のとおりです。

価値 説明
length 隣接する境界線間の距離を値プラス単位 (2px など) で設定します。負の値は使用できません。長さパラメータが 1 つだけ定義されている場合、この値は水平方向と垂直方向の間隔に同時に作用します。2 つの長さパラメータが同時に定義されている場合、最初の長さパラメータは隣接する境界線の水平方向の間隔を示し、 2 番目の長さパラメーターは、隣接する境界線の垂直方向の間隔を示します
inherit 親要素から border-spacing プロパティの値を継承する

[例] border-spacing プロパティを使用して、テーブル内の隣接する境界線間の間隔を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-spacing: 15px 10px;
        }
        .table_two {
            margin-left: 20px;
            border-spacing: 20px;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: border-spacing プロパティのデモ
図: border-spacing プロパティのデモ

4. caption-side

caption-side 属性はテーブル タイトルの位置を設定でき、属性のオプション値は次のとおりです。

価値 説明
top デフォルトでは、テーブル ヘッダーをテーブルのすぐ上に配置します
bottom テーブル ヘッダーをテーブルのすぐ下に配置する
inherit 親要素からキャプション側属性の値を継承する

【例】表タイトルの位置をキャプションサイド属性で設定する場合:

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            caption-side: top;
        }
        .table_two {
            margin-left: 20px;
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: キャプション側属性のデモ
図: キャプション側属性のデモ
5.空のセル

empty-cells 属性は、セルにコンテンツがない場合に空のセルを表示するかどうかを設定するために使用され (border-collapse 属性が別の場合にのみ有効)、属性のオプション値は次のとおりです。 :

価値 説明
hide 空のセルの境界線を非表示にする
show デフォルトでは、空のセルの周囲に境界線が表示されます
inherit 親要素から empty-cells 属性の値を継承する

【例】 empty-cells属性で空のセルを非表示にするかどうかを設定する。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            empty-cells: hide;
        }
        .table_two {
            margin-left: 20px;
            empty-cells: show;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html> 

実行結果は次の図のとおりです。

図: empty-cells プロパティのデモ
図: empty-cells プロパティのデモ
 

「CSS テーブル スタイル (表)」についてわかりやすく解説!絶対に観るべきベスト2動画

【初心者向け】table(テーブル)のコーディングを基礎から徹底解説!HTML編【HTML・CSS コーディング】
HTML入門講座 #07:表(テーブル) table, tr, th, td タグ