【CSS初心者入門】表を作れるtableの使い方を解説! | プログラミング入門ならWEBCAMP NAVI
【1月枠も残りわずか】転職保証コース

【CSS初心者入門】表を作れるtableの使い方を解説!

みなさんはCSSの学習をしていませんか?

CSSを学習する時に「table」が使えることは基本となっています。

今回の記事ではtableの使い方を解説します!

CSSでtableデザインその他を細かく設定する

HTMLでページを作るにあたってよくつかうのがテーブルです。テーブル実装では、もちろんHTMLのみでも可能ですが、CSSプロパティで効率よく見た目きれいに実装した方ががメンテナンスもしやすくなります。

また、定義をまとめることができるので、スタイルの変更も1か所で済みます。(これはテーブルに限らずCSSの利点ですね)今回はよく使うテーブルのCSSプロパティをご紹介したいと思います。

tableへのCSS適用

一般的な要素へのCSS適用が使用できます。

table {…} /* テーブル要素 */
table tr {…} /* テーブルのtr要素 */
table tr th{…} /* テーブルのth要素 */
table tr td{…} /* テーブルのtd要素 */

使用例

HTMLでの一般的な定義方法や、色や罫線などのCSSプロパティはTABLE特有ではないため説明は省きます。ここでは、有用と思われるものをピックアップしてご紹介します。
※実行結果はすべてサンプルに含まれます。

基本CSS

基本となるテーブルは以下のような設定です。


table {
width : 450px;
}

/* 各列の幅を設定 */
table .col1 { width: 150px; }
table .col2 { width: 250px; }
table .col3 { width: 300px; }

table tr th, table tr td {
padding : 10 10px;
border : 1px solid #ded;
vertical-align : middle;
}

table tr th {
color : #fff;
background-color : #22e;
text-align : center;
font-weight : bold;
}

table tr td {
color : #000;
background-color : #fff;
text-align : left;
}

セルのすき間を取り除く

テーブルのセル間のすきまを取り除くためにはborder-collapseプロパティを使用します。


border-collapse : collapse;

テーブル内をマウスカーソルでコピーさせない

通常はテーブルデータはマウスで選択コピーすることが可能ですが、それを抑止します。
user-selectプロパティを使います。(他2つのプロパティは古いブラウザ対応です)


table {
-ms-user-select : none;
-webkit-user-select : none;
user-select : none;
}

奇数番目または偶数番目に対する要素にスタイルを適用する

今回は、奇数行または偶数行のデータに対して背景色を設定しています。

oddが奇数、evenが偶数を表します。

ちなみにnth-child(3)と書くと、3行目だけに適用できます。


table tr:nth-child(odd) td { background: #f2f2f2; } /* 奇数行 */
table tr:nth-child(even) td { background: #2f2f2f; } /* 偶数行 */
}

ヘッダを固定しデータ行のみスクロールする

設定するにはテーブルヘッダ要素とテーブルボディ要素を定義し、各列にclassを振り分けて幅を設定する必要があります。

テーブルヘッダをdisplayプロパティで固定し、テーブルボディは縦軸スクロールで高さを固定します。


table thead,table tbody {
display: block;
}

table tbody {
overflow-y: scroll;
height: 50px;
}

マウスホバー時に背景色を変える

ヘッダ以外の背景色を変更します。nth-child(n+2)とは2行目以降を表します。


table tr:nth-child(n+1) td { background: #ff5522; }

セル内を編集する

テーブルのセルを修正するためには、contentEditable属性を適用します。

※IEやEdgeなどMicrosoft系ではテーブル要素にcontentEditable属性を設定しても動作しません。
※動作させるためにはデータをspanタグで括って各カラムに設定することが必要です。


<table class="">
<thead>
<tr>
<th class="col1">メニュー名</th>
<th class="col2">説明</th>
<th class="col3">備考</th>
</tr>
</thead>
<tbody contenteditable="true">
<tr>
…

または、


<table class="">
<thead>
<tr>
<th class="col1">メニュー名</th>
<th class="col2">説明</th>
<th class="col3">備考</th>
</tr>
</thead>
<tbody contenteditable="true">
<tr>
<td class="col1"><span contenteditable="true">カレー</span></td>
<td class="col2"><span contenteditable="true">週末の定番</span></td>
<td class="col3"><span contenteditable="true">各社によって辛さのレベルが違う</span></td>
</tr>
…

Microsoft系の場合、項目数に比例して設定項目が多くなってしまいますが、実際の場合はデータ取得時にJavaScriptでtd内にcontentEditable属性を一括設定するなどして対応してください。

サンプル


<!DOCTYPE html>
<html>
<head>
<title>table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
input {
width : 250px;
}
table {
width : 450px;
}

/* 各列の幅を設定 */
table .col1 { width: 150px; }
table .col2 { width: 250px; }
table .col3 { width: 300px; }

table tr th, table tr td {
padding : 10 10px;
border : 1px solid #ded;
vertical-align : middle;
}

table tr th {
color : #fff;
background-color : #22e;
text-align : center;
font-weight : bold;
}

table tr td {
color : #000;
background-color : #fff;
text-align : left;
}

.sample1 { border-collapse : collapse !important; }
.sample2 { -ms-user-select : none;
-webkit-user-select : none;
user-select : none;
}
</style>
<script>
$(function() {
$("#button1").click(function() { $("table").addClass('sample1'); });
$("#button2").click(function() { $("table").addClass('sample2'); });
$("#button3").click(function() { $("table tr:nth-child(odd) td").css({ 'background-color':'#f2f2f2'}); });
$("#button4").click(function() { $("table tr:nth-child(even) td").css({ 'background-color':'#eeccee'}); });
$("#button5").click(function() {
$("table thead").css({ 'display':'block'});
$("table tbody").css({ 'display':'block','overflow-y': 'scroll','height': '100px'});
});
$("#button6").click(function() {
$("table tr:nth-child(n+1) td").hover(
function(e) {
$(this).css({ 'cursor':'default','background-color':'#ff5522'});
});
});
$("#button7").click(function() {
$("table tbody tr td span").attr({ 'contenteditable':'true' });
});

});
</script>
</head>
<body>
<input type="button" id="button1" value="セルのすき間を取り除く" /><br/>
<input type="button" id="button2" value="マウスカーソルでコピー抑止" /><br/>
<input type="button" id="button3" value="奇数番目の背景色変更" /><br/>
<input type="button" id="button4" value="偶数番目の背景色変更" /><br/>
<input type="button" id="button5" value="ヘッダを固定しデータ行のみスクロール" /><br/>
<input type="button" id="button6" value="マウスホバー時に背景色を変える" /><br/>
<input type="button" id="button7" value="セル内を編集する" /><br/>

<table class="">
<thead>
<tr>
<th class="col1">メニュー名</th>
<th class="col2">説明</th>
<th class="col3">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1"><span>カレー</td>
<td class="col2"><span>週末の定番</td>
<td class="col3"><span>各社によって辛さのレベルが違う</span></td>
</tr>
<tr>
<td class="col1"><span>ハンバーグ</span></td>
<td class="col2"><span>和風も洋風もいける大人気料理</span></td>
<td class="col3"><span>肉の噛み応えがほしい人にはあまり好まれない</span></td>
</tr>
<tr>
<td class="col1"><span>冷や汁</span></td>
<td class="col2"><span>宮崎の郷土料理</span></td>
<td class="col3"><span>きゅうりや魚粉、お豆腐を出汁で伸ばしたもの。特に夏はおすすめ</span></td>
</tr>
</tbody>
</table>

</body>
</html>

まとめ

初心者の方向けにtableを紹介していきましたが、いかがでしたか?

tableを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

1月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%

 

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。