CSSセレクタを用いてテーブルにスタイルを設定する - テーブルに設定されたクラスでセルにスタイルを反映させる
CSSのセレクタをうまく利用すると簡単にテーブルにスタイルを設定できます。
個々の要素にスタイルを設定する方法
CSSファイル (Style.css)
.MyTable {
border: 1px solid green;
}
.MyTableRow{
border: 1px solid #0000FF;
}
.MyTableCell {
border: 1px solid #ff0000;
}
HTMLファイル
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table class="MyTable">
<tr class="MyTableRow">
<td class="MyTableCell">ペンギンクッキー</td>
<td class="MyTableCell">\380</td>
</tr>
<tr class="MyTableRow">
<td class="MyTableCell">しろくまキャンディー</td>
<td class="MyTableCell">\150</td>
</tr>
<tr class="MyTableRow">
<td class="MyTableCell">くじらポテトチップ</td>
<td class="MyTableCell">\210</td>
</tr>
</table>
</body>
</html>
解説
テーブルのTable,tr,tdそれぞれのタグにクラス属性を割り当てることでスタイルを設定しています。はじめのうちは、わかりやすいですが、それぞれの要素にclass属性を設定するためHTMLのコードが増え、修正も手間がかかります。また、テーブルの数が増えスタイルの種類が増えると管理も大変になります。
セレクタを利用しTableタグにのみクラス属性を設定する方法
CSSファイル (Style.css)
.MyTable2 {
border: 1px solid green;
}
.MyTable2 tr {
border: 1px solid #0000FF;
}
.MyTable2 tr td {
border: 1px solid #ff0000;
}
HTMLファイル
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table class="MyTable2">
<tr>
<td>ペンギンクッキー</td>
<td>\380</td>
</tr>
<tr>
<td>しろくまキャンディー</td>
<td>\150</td>
</tr>
<tr>
<td>くじらポテトチップ</td>
<td>\210</td>
</tr>
</table>
</body>
</html>
解説
CSSファイル側でセレクタを用いることで、tableタグにのみクラス属性を設定すれば内部のセル(td)にまでスタイルが反映されます。
実行結果
どちらの書式でも同じスタイルのテーブルが表示されます。
このページのキーワード
- CSSセレクタを用いてテーブルにスタイルを指定する - テーブルに設定されたクラスでセルにスタイルを反映させる
- CSSセレクタを用いてテーブルにスタイルを適用する - テーブルに設定されたクラスでセルにスタイルを反映させる
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
