HTML/CSS: HTMLのTABLEタグで表を作成するときCSSを適用して見栄えよくするには

説明文の表示ライブデモを見る▶

ようこそ「HTML/CSS」へ...

HTML/CSS»記事(Article010) ◀前の記事次の記事▶

HTMLのTABLEタグで表を作成するときCSSを適用して見栄えよくするには

ここではHTMLのtableタグにCSSを適用して表を見栄え良くするための12の方法を紹介します。表1-表12ではそれぞれ異なるCSSを適用して見栄えを調整しています。表12ではjQueryを使用して表の行を選択する機能を実装しています。

図1は表の行に交互に異なる背景色を表示して見やすくしています。さらに表に編集行と挿入行を追加しています。図1をクリックすると拡大表示します。

操作手順と解説

表1の見出し「Table1: 表のボーダー無し (No Border)」の下に配置されているチェックボックス「Show/Hide CSS/HTML」をチェックすると、表に適用されているCSSのソースが表示されます。ここでは、table要素にCSSの「border: none;」を適用しています。
表2ではtable要素にCSSの「border: 1px solid black;」を適用して表にボーダーを追加しています。
表3ではtable要素にCSSの「border-collapse: collapse;」を適用して表に罫線だけが表示されるようにしています。
表4ではtableのth、td要素にCSSの「padding: 15px;」を適用して表のセルをパディングしています。
表5ではtableのth要素にCSSの「text-align: left;」を適用して表の見出しを「左詰め」にしています。 th要素はデフォルトの状態では「中央揃え」になります。
表6ではtableのth、td要素にCSSの「background-color: antiquewhite;」を適用して背景色を追加しています。
表7ではtableのtr要素にCSSの「tr:nth-child(even) 」「 tr:nth-child(odd)」を適用して表がシマウマ模様になるようにしています。奇数行と偶数行の背景色を変えることによりシマウマ模様になります。
表8ではtableの見出しにCSSの「tr:first-child」を適用して前景色と背景色を追加しています。背景色には「黒＋透明度(0.8)」を設定しています。色の設定にrgba()を使用すると色の３原色の加えて透明度も指定することができます。
表9ではtableの見出しにCSSの「th.up-arrow:after」を適用して列の並べ替え順「降順」「昇順」の矢印を表示しています。 CSSでテキスト文字を表示させるにはcontentプロパティを使用して「content: "▲"」「content: "▼"」のように指定します。表の列の並べ替えはASP.NETのListViewコントロールを使用するときなどに利用します。 ASP.NETのListViewを使用したサンプルは「Article002」を参照してください。
表10ではtableに編集行と挿入行を追加してします。編集行のtr要素にはCSSの「tr.edit-item」を適用させて背景色を「aquamarine」にしています。挿入行のtr要素にはCSSの「tr.insert-item」を適用させて背景色を「darkgoldenrod」にしています。表に編集行や挿入行を表示させるのはASP.NETのListViewコントロールなどを使用してデータベースのレコードを編集・挿入するときに使います。 ASP.NETのListViewを使用したサンプルは「Article001」を参照してください。
表11ではtableのtr要素にCSSの「tr:hover」を適用させてマウスのある行をハイライトさせています。

NOTE: iPhoneなどのモバイルデバイスにCSSの「:hover」を適用させるには、該当するHTML要素か親要素(body要素など）に「ontouchstart=""または ontouchend=""」を追加する必要があります。
表12には行を選択する列を追加してチェックボックスを表示しています。通常行のチェックボックスをチェックするとその行がハイライトされます。表の見出しのチェックボックスをチェックすると全ての行が選択された状態となります。見出しのチェックボックスのチェックを外すと通常行の全てのチェックが自動的に外れます。通常行のチェックボックスをチェックすると、jQueryのクリックイベントが発生してその行のtr要素にCSSのクラス「selected-item」を追加します。 tr要素に「selected-item」が追加されるとその行の背景色が「#ffff99」に変わります。チェックを外すと「selected-item」を削除します。tr要素にCSSクラスを追加・削除するには、jQueryのaddClass()、removeClass()を使用します。 toggleClass()を使用することもできます。表の行を選択する機能の詳しい解説は、「 Article005」と「 Article006」を参照してください。

Live DEMO

Table1: 表のボーダー無し (No Border)

Show/Hide CSS/HTML

table.article010-1, table.article010-1 th, table.article010-1 td {
    border: none;
}

<table  id="Article010-1" class="article010-1">
  <tr>
    <th>HeaderRow.Col1</th>
    <th>HeaderRow.Col2</th>
    <th>HeaderRow.Col3</th>
  </tr>
  <tr> 
    <td>Item1.Row1.Col1</td>
    <td>Item1.Row1.Col2</td>
    <td>Item1.Row1.Col3</td>
  </tr>
  ==== 省略 =====
  <tr> 
    <td>Item5.Row5.Col1</td>
    <td>Item5.Row5.Col2</td>
    <td>Item5.Row5.Col3</td>
  </tr>
</table>

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table2: 表にボーダー追加 (Add a Border)

Show/Hide CSS/HTML

table.article010-2, table.article010-2 th, table.article010-2 td {
    border: 1px solid black;
}

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table3: 表のボーダーを折りたたむ (Collapsed Borders)

Show/Hide CSS/HTML

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

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table4: 表のセルをパディングする (Add Cell Padding)

Show/Hide CSS/HTML

table.article010-4, table.article010-4 th, table.article010-4 td {
    border: 1px solid black;  
    border-collapse: collapse;
    padding: 15px;
}

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table5: 表の見出しを左詰めにする (Left-align Headings)

Show/Hide CSS/HTML

table.article010-5, table.article010-5 th, table.article010-5 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-5 th {
        padding: 15px 0px 15px 0px;
        text-align: left;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table6: 表に背景色を追加する (Add background-color)

Show/Hide CSS/HTML

table.article010-6, table.article010-6 th, table.article010-6 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
    background-color: antiquewhite;
}

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table7: 表をシマウマ模様にする (Zebra Striped Table)

Show/Hide CSS/HTML

table.article010-7, table.article010-7 th, table.article010-7 td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-7 tr:nth-child(even) {
        background: #FFFFFF;
    }
    table.article010-7 tr:nth-child(odd) {
        background: #F2F2F2;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table8: 表の見出しに前景色・背景色を追加する (Add Header color/background-color)

Show/Hide CSS/HTML

table.article010-8, table.article010-8 th, table.article010-8 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-8 tr:nth-child(even) {
        background: #FFFFFF;
    }
    table.article010-8 tr:nth-child(odd) {
        background: #F2F2F2;
    }
    table.article010-8 tr:first-child {
        background: rgba(0,0,0,0.8);
        color: white;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table9: 表の見出しに昇順/降順の矢印を追加する (Add Up/Down Arrows)

Show/Hide CSS/HTML

table.article010-9, table.article010-9 th, table.article010-9 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-9 tr:nth-child(even) {
    	background: #FFFFFF;
    }
    table.article010-9 tr:nth-child(odd) {
    	background: #F2F2F2;
    }
    table.article010-9 tr:first-child th.up-arrow:after {
    	content: "▲";
    	color: Red;
    }
    table.article010-9 tr:first-child th.down-arrow:after {
    	content: "▼";
    	color: Red;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table10: 表に編集行/挿入行を追加する (Add Edit/Insert Rows)

Show/Hide CSS/HTML

table.article010-10, table.article010-10 th, table.article010-10 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-10 tr:nth-child(even) {
    	background: #FFFFFF;
    }
    table.article010-10 tr:nth-child(odd) {
    	background: #F2F2F2;
    }
    table.article010-10 tr.edit-item {
    	background-color: aquamarine;
    }
    table.article010-10 tr.insert-item {
    	background-color: darkgoldenrod;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3

Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table11: 表のマウスのある行をハイライトさせる (Highlight Table Row on Hover)

Show/Hide CSS/HTML

table.article010-11, table.article010-11 th, table.article010-11 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-11 tr:nth-child(even) {
    	background: #FFFFFF;
    }
    table.article010-11 tr:nth-child(odd) {
    	background: #F2F2F2;
    }
    table.article010-11 tr:hover {
    	background: #ffff99;
    }

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Table12: 表の行を選択できるようにする (Select Rows)

Show/Hide CSS/jQuery

CSS:
table.article010-12, table.article010-12 th, table.article010-12 td {
    border: 1px solid black; 
    border-collapse: collapse;
    padding: 15px;
}
    table.article010-12 tr:nth-child(even) {
    	background: #FFFFFF;
    }
    table.article010-12 tr:nth-child(odd) {
    	background: #F2F2F2;
    }
    table.article010-12 tr.selected-item {
    	background-color:  #ffff99;
    }     

jQuery:
// jQuery Document Ready Event...
$(function () {
    // Select Current Row
    $('input.checkbox').click(function () {
        if ($(this).is(':checked')) {
            $(this).parent().parent().addClass('selected-item');
            $('input.checkboxAll').prop('checked', true);
        }
        else {
            $(this).parent().parent().removeClass('selected-item');
            var checked = false;
			$('input.checkbox').each(function (index, item) {
                if ($(this).is(':checked')) {
                    checked = true;
                }
            });
            if (!checked) {
                $('input.checkboxAll').prop('checked', false);
            }
        }
    });

    // Select All Rows
    $('input.checkboxAll').click(function () {
        if ($(this).is(':checked')) {
            $('input.checkbox').prop('checked', true);
            $('input.checkbox').parent().parent().addClass('selected-item');
        } else {
            $('input.checkbox').prop('checked', false);
            $('input.checkbox').parent().parent().removeClass('selected-item');
        }
	});
});

HeaderRow.Col1	HeaderRow.Col2	HeaderRow.Col3
Item1.Row1.Col1	Item1.Row1.Col2	Item1.Row1.Col3
Item2.Row2.Col1	Item2.Row2.Col2	Item2.Row2.Col3
Item3.Row3.Col1	Item3.Row3.Col2	Item3.Row3.Col3
Item4.Row4.Col1	Item4.Row4.Col2	Item4.Row4.Col3
Item5.Row5.Col1	Item5.Row5.Col2	Item5.Row5.Col3

Go Top

HTML/CSS {Article010}

HTMLのTABLEタグで表を作成するときCSSを適用して見栄えよくするには

操作手順と解説

Live DEMO

Table1: 表のボーダー無し (No Border)

Table2: 表にボーダー追加 (Add a Border)

Table3: 表のボーダーを折りたたむ (Collapsed Borders)

Table4: 表のセルをパディングする (Add Cell Padding)

Table5: 表の見出しを左詰めにする (Left-align Headings)

Table6: 表に背景色を追加する (Add background-color)

Table7: 表をシマウマ模様にする (Zebra Striped Table)

Table8: 表の見出しに前景色・背景色を追加する (Add Header color/background-color)

Table9: 表の見出しに昇順/降順の矢印を追加する (Add Up/Down Arrows)

Table10: 表に編集行/挿入行を追加する (Add Edit/Insert Rows)

Table11: 表のマウスのある行をハイライトさせる (Highlight Table Row on Hover)

Table12: 表の行を選択できるようにする (Select Rows)