プログラミング

CSSでテーブルをデザイン

最終更新： 20/04/2025
1 分の読み

CSSにおける「テーブル（Tables）」のスタイルを完全かつ包括的に理解することは、Webデザインの中で非常に重要な要素です。テーブルはデータを整然と表示するために使われ、HTMLでは

タグを使って構造を作成しますが、そのデザインを制御するためにCSSが必要です。この記事では、CSSを使用してテーブルのスタイリングを行う方法について、基本から応用までを詳細に説明します。

関連記事

1. テーブルの基本的な構造

HTMLのテーブルは、以下のタグを使用して構造を作成します。

：テーブルの全体を定義します。

    • ：テーブルの行を定義します。

    • ：テーブルのヘッダーセルを定義します。

    		• ：テーブルのデータセルを定義します。

    • ：テーブルにタイトルをつけるためのタグです（任意）。

    基本的なテーブルの例は次のようになります。

    html
    <table>
  <caption>学生の成績表caption>
  <thead>
    <tr>
      <th>名前th>
      <th>科目th>
      <th>成績th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>山田太郎td>
      <td>数学td>
      <td>90td>
    tr>
    <tr>
      <td>佐藤花子td>
      <td>英語td>
      <td>85td>
    tr>
  tbody>
table>

    2. CSSを使った基本的なスタイリング

    テーブルにCSSを適用する基本的な方法は、

    ,

    ,

    ,

    		のそれぞれにスタイルを指定することです。

    css
    table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
}

caption {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

    上記のCSSは、テーブルに以下のスタイルを適用します：

    • テーブルの幅を100%に設定し、全体の幅を画面いっぱいに広げます。

    • border-collapse: collapse; は、テーブルの枠線が重ならないようにします。

    • セル内のテキストの周りに10pxのパディングを設定し、1pxの薄いグレーの枠線を追加します。

    • ヘッダーには太字と大きめのフォントサイズを設定し、テーブルの下にマージンを追加します。

    3. テーブルの行やセルのデザイン

    テーブルのデザインは、行ごとに異なるスタイルを適用することでも改善できます。たとえば、nth-child() セレクタを使用して奇数行と偶数行に異なる背景色を設定することができます。

    css
    tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #ffffff;
}

    これにより、テーブルの奇数行は薄いグレー、偶数行は白となり、視覚的に区別しやすくなります。

    4. テーブルのヘッダーを固定する

    スクロールする長いテーブルでは、ヘッダーがスクロールに伴って消えてしまうことがあります。これを防ぐために、CSSでヘッダーを固定する方法を示します。

    css
    thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

    これにより、テーブルをスクロールしてもヘッダーが画面の上部に固定され、常に表示されるようになります。

    5. テーブルのサイズとレイアウト

    テーブルの幅や高さを指定することで、レイアウトを整えることができます。たとえば、列幅を指定したり、セルの高さを設定することができます。

    css
    th, td {
  width: 200px;
  height: 50px;
}

table {
  width: 80%;
  margin: 0 auto;
}

    ここでは、セルの幅を200px、セルの高さを50pxに設定し、テーブル自体の幅を画面の80%にして中央揃えにしています。

    6. テーブルの境界線のカスタマイズ

    テーブルの枠線をさらにカスタマイズするために、border-style, border-width, border-color などを使って、さまざまなスタイルの枠線を適用することができます。

    css
    table {
  border: 2px solid #333;
}

th, td {
  border: 1px dashed #888;
}

    この例では、テーブル全体に太い実線の枠線を設定し、セルには細かい点線の枠線を適用しています。

    7. テーブルのレスポンシブデザイン

    モバイル端末など、画面サイズが小さいデバイスでテーブルを閲覧する際、テーブルが画面に収まらない場合があります。これを防ぐために、レスポンシブデザインを使用してテーブルを自動的に調整できるようにします。

    css
    table {
  width: 100%;
  table-layout: auto;
}

@media screen and (max-width: 600px) {
  table, th, td {
    display: block;
    width: 100%;
  }
  td {
    text-align: right;
  }
}

    このCSSでは、600px以下の画面幅に対応するために、テーブル、ヘッダー、セルをブロック要素として表示し、縦に並べることで、画面に収まるようにしています。

    8. テーブルに影を追加する

    テーブルに影を付けて、立体的な効果を加えることも可能です。これにより、テーブルがページのデザインに溶け込みつつも目立つようになります。

    css
    table {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    このCSSは、テーブルに軽い影を加え、デザインに深みを与える効果があります。

    9. テーブルのカスタムスタイル

    特定の状況に応じて、テーブルにカスタムスタイルを追加することもできます。例えば、ホバー効果や、特定の条件に基づいた色変更を行うことができます。

    css
    tr:hover {
  background-color: #e0e0e0;
}

    このコードでは、ユーザーが行にカーソルを合わせたときに、背景色を変更する効果を加えています。

    10. まとめ

    CSSを使ってテーブルをデザインする方法は非常に多岐に渡ります。基本的なスタイリングから、レスポンシブデザイン、インタラクティブな効果まで、テーブルはシンプルでありながらも多様なスタイルを適用できます。これらのテクニックを駆使することで、データを効果的に、かつ美しく表示することが可能になります。テーブルをデザインする際は、目的に応じて適切なスタイルを選択し、ユーザーにとって視覚的にも機能的にも使いやすいレイアウトを目指しましょう。

    最終更新： 20/04/2025
    1 分の読み
    Back to top button