ホバー時にテーブル行をハイライトする方法

HTMLのテーブル要素を作成します。例えば、以下のようなテーブルを考えましょう。

<table>
  <tr>
    <th>ヘッダ1</th>
    <th>ヘッダ2</th>
    <th>ヘッダ3</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
  <tr>
    <td>データ4</td>
    <td>データ5</td>
    <td>データ6</td>
  </tr>
</table>

CSSを使用して、ホバー時に行をハイライトするためのスタイルを追加します。以下の例では、hoverセレクタとbackground-colorプロパティを使用して、ホバー時に背景色を変更します。

table tr:hover {
  background-color: yellow;
}

上記のCSSコードをHTMLファイルの<style>セクション内に追加するか、外部のCSSファイルに保存して読み込むようにしてください。

これで、テーブルの行がホバーされたときに背景色が変更されるようになります。ホバー時のハイライトの色は、必要に応じて変更することができます。

これは基本的な方法ですが、より高度な効果やカスタマイズも可能です。例えば、CSSのtransitionプロパティを使用して、ハイライトの変化をスムーズにすることもできます。

以上が、テーブルの行をホバー時にハイライトする方法です。この方法を利用して、ウェブページ上でのテーブルの視覚的なインタラクションを向上させることができます。