「HTMLテーブルの高度な機能」

html
CopyEdit
<table>
  <tr>
    <td>データ1td>
    <td>データ2td>
    <td>データ3td>
  tr>
  <tr>
    <td>データ4td>
    <td>データ5td>
    <td>データ6td>
  tr>
table>

2. ヘッダー行の追加

テーブルにはヘッダーを追加することができ、これにより各列が何を表しているかが明確になります。

html
CopyEdit
<table>
  <tr>
    <th>名前th>
    <th>年齢th>
    <th>職業th>
  tr>
  <tr>
    <td>佐藤td>
    <td>30td>
    <td>エンジニアtd>
  tr>
  <tr>
    <td>鈴木td>
    <td>25td>
    <td>デザイナーtd>
  tr>
table>

3. セルの結合（colspan と rowspan）

HTMLのテーブルでは、複数の列や行を結合して表示することができます。これにより、複雑なデータのレイアウトが可能になります。

• colspanは、セルが横に何列分の幅を取るかを指定します。
• rowspanは、セルが縦に何行分の高さを取るかを指定します。

html
CopyEdit
<table>
  <tr>
    <th rowspan="2">名前th>
    <th>年齢th>
    <th>職業th>
  tr>
  <tr>
    <td colspan="2">職業情報td>
  tr>
  <tr>
    <td>佐藤td>
    <td>30td>
    <td>エンジニアtd>
  tr>
table>

4. テーブルのスタイリング（CSS）

テーブルを視覚的に魅力的にするために、CSSを活用することが重要です。borderやpaddingを使用してセルの境界を明確にし、background-colorを使って色を変えることができます。

html
CopyEdit
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }

  th {
    background-color: #f2f2f2;
  }
style>

これにより、テーブルのデザインがシンプルでありながら、視覚的に美しくなります。

5. テーブルのインタラクション

HTMLテーブルを動的に操作するためには、JavaScriptを利用してテーブルをインタラクティブにすることが可能です。例えば、ユーザーがテーブル内の行をクリックすることで、その行のデータを強調表示したり、フィルタリングやソート機能を追加したりすることができます。

html
CopyEdit
<script>
  function highlightRow(row) {
    row.style.backgroundColor = 'yellow';
  }

  function resetRow(row) {
    row.style.backgroundColor = '';
  }
script>

<table>
  <tr onmouseover="highlightRow(this)" onmouseout="resetRow(this)">
    <td>佐藤td>
    <td>30td>
    <td>エンジニアtd>
  tr>
  <tr onmouseover="highlightRow(this)" onmouseout="resetRow(this)">
    <td>鈴木td>
    <td>25td>
    <td>デザイナーtd>
  tr>
table>

6. 固定ヘッダーとスクロール機能

長いテーブルでは、ヘッダーがスクロールとともに消えてしまうことがありますが、CSSを使ってヘッダーを固定し、スクロールしても常に表示されるようにすることができます。

html
CopyEdit
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    position: sticky;
    top: 0;
    background-color: #f2f2f2;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
style>

<table>
  <thead>
    <tr>
      <th>名前th>
      <th>年齢th>
      <th>職業th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>佐藤td>
      <td>30td>
      <td>エンジニアtd>
    tr>
    <tr>
      <td>鈴木td>
      <td>25td>
      <td>デザイナーtd>
    tr>
    
  tbody>
table>

7. テーブルのアクセシビリティ

ウェブコンテンツのアクセシビリティを考慮すると、スクリーンリーダーがテーブルの内容を正確に理解できるようにすることが重要です。