CSSのセレクタをうまく利用すると簡単にテーブルにスタイルを設定できます。
.MyTable {
border: 1px solid green;
}
.MyTableRow{
border: 1px solid #0000FF;
}
.MyTableCell {
border: 1px solid #ff0000;
}
<!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のコードが増え、修正も手間がかかります。また、テーブルの数が増えスタイルの種類が増えると管理も大変になります。
.MyTable2 {
border: 1px solid green;
}
.MyTable2 tr {
border: 1px solid #0000FF;
}
.MyTable2 tr td {
border: 1px solid #ff0000;
}
<!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)にまでスタイルが反映されます。
どちらの書式でも同じスタイルのテーブルが表示されます。
