HTML・CSSを用いてテーブルや表をデザインする方法を解説！

忍者CODEの学習は“実践型”！
だから結果を出せる！

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から！

【HTML】tableタグの基本

table要素の作成

表を作成するためには、HTMLの`<table>`要素を使用します。この要素は表全体を定義します。

<table>
   <!-- 行やセルの配置 -->
</table>

行とセルの作成

表は行とセルから構成されます。行は`<tr>`要素で表され、セルは`<td>`要素で表されます。

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
</table>

セルの内容はセル内に直接記述されます。

テーブルの見出し行

表の最初の行は通常、見出しとして使用されます。見出し行は`<th>`要素で表されます。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
</table>

セルの結合

セルを結合することで、より複雑な表のレイアウトを作成することができます。セルの結合には`colspan`属性と`rowspan`属性を使用します。colspan属性は横方向に、rowspan属性は縦方向にセルを結合するために使用されます。

<table>
  <tr>
    <th colspan="2">見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td rowspan="2">セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
  </tr>
</table>

以上が、CSSを使用せずにtableタグを使った表のデザイン方法の基本です。

【HTML・CSS】テーブルのスタイリング

表をより魅力的にするために、CSSを使用してテーブルのスタイリングを行うことができます。以下では、テーブル全体や行・セルのスタイル、テーブルの幅と高さの設定、セルの境界線のスタイルについて説明します

テーブル全体のスタイル

テーブル全体にスタイルを適用するためには、`<table>`要素に対してCSSを使用します。

table {
　background-color: #f2f2f2;
　color: #333;
}

行とセルのスタイル

行とセルに対してスタイルを適用するためには、`<tr>`要素や`<td>`要素に対してCSSを使用します。

tr {
　background-color: #ffffff;
}

td {
　padding: 10px;
}

テーブルの幅と高さの設定

テーブルの幅や高さを調整するには、widthプロパティやheightプロパティを使用します。以下は、テーブルの幅を50%、高さを200pxに設定する例です。

table {
　width: 50%;
　height: 200px;
}

セルの境界線のスタイル

セルの境界線のスタイルを設定するためには、CSSの`border`プロパティを使用します。

td {
　border: 1px solid #ccc;
}

以上が、CSSを使用してtableタグを使った表のデザインを行う方法です。これらのスタイリングテクニックを組み合わせることで、鮮やかで見やすい表を作成することができます。自由にカスタマイズして、自分のウェブページに合った表を作りましょう。

【HTML・CSS】テーブルの応用

テーブルをさらに応用して、ヘッダー固定のテーブル、セルの色付け、セル内の要素の配置など、より高度な表のデザインを行う方法を紹介します。

ヘッダー固定のテーブル

ヘッダーを固定するテーブルを作成するには、CSSの`position: sticky;`プロパティを使用します。

<table>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表のデータをここに追加 -->
  </tbody>
</table>

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

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

セルの色付け

セルに背景色を付けるには、CSSの`background-color`プロパティを使用します。

  <table>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
      <td>セル3</td>
    </tr>
    <tr>
      <td>セル4</td>
      <td>セル5</td>
      <td>セル6</td>
    </tr>
  </table>

td {
    padding: 10px;
    background-color: #ffc;
    color: #333;
}

セル内の要素の配置

セル内の要素の配置を調整するには、CSSの`text-align`プロパティや`vertical-align`プロパティを使用します。

<table>
    <tr>
      <td>テキスト</td>
      <td><img src="image.jpg" alt="画像"></td>
    </tr>
 </table>

td {
    text-align: center;
}

img {
    float: right;
}

これらのテーブルの応用技術を使用することで、より柔軟で見栄えの良い表を作成することができます。自分のウェブページやアプリケーションのデザインに合わせて、これらの応用技術を活用してください。

プログラミングスクールなら
忍者CODE

質問に答えて簡単１分の適正プラン診断！

【HTML・CSS】テーブルのレスポンシブ対応

テーブルをレスポンシブにすることで、異なるデバイスや画面サイズでの表示に適応させることができます。以下では、メディアクエリを使用したレスポンシブデザインと、スクロール可能なテーブルの作成方法について説明します。

メディアクエリを使用したレスポンシブデザイン

メディアクエリは、特定の画面幅やデバイスに対して異なるスタイルを適用するためのCSSの機能です。これを活用することで、テーブルを異なるデバイスに応じて適切に表示することができます。以下のようなコードを使用して、メディアクエリを適用したレスポンシブデザインを行います。

  <table>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
    <tr>
      <td>セル1</td>
      <td>セル2</td>
      <td>セル3</td>
    </tr>
    <!-- 表のデータをここに追加 -->
  </table>

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

td, th {
    padding: 10px;
}

@media screen and (max-width: 600px) {
    /* 600px以下の画面幅に対するスタイル */
    td, th {
      font-size: 12px;
    }
}

上記の例では、画面幅が600px以下の場合にはセル内のテキストのフォントサイズを12pxに変更しています。これにより、小さな画面でもテーブルが適切に表示されるようになります。

スクロール可能なテーブル

テーブルのデータが多く、画面に収まりきらない場合には、スクロール可能なテーブルを作成することが有用です。これにより、ユーザーはテーブル全体をスクロールして閲覧することができます。以下のコードは、スクロール可能なテーブルを作成する例です。

<div class="table-container">
    <table>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
      </tr>
      <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
      </tr>
      <!-- 表のデータをここに追加 -->
    </table>
  </div>

.table-container {
    overflow-x: auto;
}

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

td, th {
    padding: 10px;
}

上記の例では、テーブルを包むdiv要素にtable-containerというクラスを追加し、overflow-x: auto;のCSSプロパティを適用しています。これにより、テーブルが画面幅を超える場合には水平方向のスクロールバーが表示されます。

これらのテクニックを使用することで、テーブルのレスポンシブ対応やスクロール可能なテーブルの作成が可能となります。デバイスや画面サイズに合わせて最適な表示を実現し、ユーザーにより良い閲覧体験を提供しましょう。
HTMLの基礎を無料で学ぶ方はこちら▶

挫折することなくHTML・CSSを習得するなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

まとめ

テーブルをデザインするためのCSSの基本と応用について学びました。

そのほか、テーブルの基本的な作成方法やセルの結合、見出し行の作成方法を理解しました。また、テーブル全体や行、セルに対してスタイルを適用する方法や、幅や高さの設定、セルの境界線のスタイルをカスタマイズする方法を学びました。

さらに、テーブルの応用として、ヘッダー固定のテーブルやセルの色付け、セル内の要素の配置方法を学びました。また、テーブルをレスポンシブにするための方法として、メディアクエリを使用したレスポンシブデザインやスクロール可能なテーブルの作成方法を学びました。

これらの知識を活用することで、自由にテーブルをデザインし、使いやすく見栄えの良い表を作成することができます。