HTML / CSS

擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう

テーブル要素の特定のセルのみにスタイルを当てることが可能になります。

事前準備

こんにちは。
今回は普段あまり触れることはありませんが、いざWEBサイトの料金テーブルなどを作るとなった時に避けては通れない、htmlのテーブル要素について勉強しましょう。


以下の様なコードを用意してください。


table.html
<table>

<thead> <tr> <th>見出しセル1</th> <th>見出しセル2</th> <th>見出しセル3</th> </tr> </thead>
<tbody> <tr> <td>データセル1</td> <td>データセル2</td> <td>データセル3</td> </tr> <tr>
<td>データセル4</td> <td>データセル5</td> <td>データセル6</td> </tr> </tbody>
</table>

問題: 1


「データセル2」のみ、背景の色を赤にしてください。


ヒント


同じ要素が連続している場合、以下のようにして、特定の要素のみにcssを当てることができます。


.td:nth-child(適応させたいセルの通し番号) {
  # ここにCSSプロパティが入ります
}

nth-childというのは、「n番目の要素に」という意味ですね。

問題: 2


データセルのうち、最後のセルだけ太文字にしてください。

問題: 3


左側のデータセルのみ文字をイタリック体にしてください。