スタイリングHTMLテーブルに関する完全なCSSチュートリアル

HTMLテーブルは、CSSでどのように効果的にスタイリングできますか？ 1.まずは、クリーンなレイアウトのために、ボーダーコラプス、パディング、背景色などのベーススタイルをヘッダーに適用します。 2。Zebra Stripesで読みやすさを強化します：nth-​​child（偶数）、およびインタラクティブにホバー効果を追加します。 3。境界線を制御し、スクロール可能なコンテナを使用してモバイル応答性を向上させるか、小さな画面でメディアクエリを介してカードのようなレイアウトに再構築します。 4.スコープ属性を使用してアクセシビリティを優先し、モバイルデバイス上の非必須列を選択的に非表示にします。

CSSを使用したHTMLテーブルのスタイリングは、Webデザインの最も魅力的な部分ではないかもしれませんが、ユーザーにとってデータの見た目や感じ方に大きな違いを生むことができるものの1つです。シンプルな比較テーブルであろうと複雑なダッシュボードを構築するかどうかにかかわらず、間隔、境界、色、応答性を制御する方法を学ぶことで、後で頭痛を節約できます。

いくつかの実用的なヒントとテクニックに飛び込みましょう。

基本的なテーブル構造とデフォルトスタイル

スタイリングに飛び込む前に、基本的なHTMLテーブルがどのように見えるかを理解するのは良いことです。

 <表>
  <thead>
    <tr> <th>ヘッダー1 </th> <th>ヘッダー2 </th> </tr>
  </thead>
  <tbody>
    <tr> <td>データa1 </td> <td>データB1 </td> </tr>
    <tr> <td>データA2 </td> <td>データB2 </td> </tr>
  </tbody>
</table>

デフォルトでは、ブラウザは最小限のスタイルを適用します。これは、境界やパディングのない単純なテキストです。つまり、テーブルをきれいで読みやすいように見せたい場合は、それらのスタイルを自分で追加する必要があります。

以下は、次のような一般的なベーススタイルを紹介します。

• border-collapse: collapse;セル間の二重境界線を除去します。
• 読みやすくするために、 thとtd内にパディングを追加します。
• 背景色をヘッダー（ th ）に適用して、体の列から視覚的に分離します。

テーブル {
  国境崩壊：崩壊;
  幅：100％;
}

th、td {
  パディング：12px;
  テキストアライグ：左;
  ボーダーボトム：1PX SOLID #DDD;
}

th {
  背景色：＃f5f5f5;
}

これにより、テーブルは派手すぎずにはるかにきれいな外観を与えます。

視覚的強化を追加します

基本を整えたら、視覚的なタッチをいくつか使用して、テーブルをよりユーザーフレンドリーにすることができます。

読みやすさのためのゼブラストライプ

交互の色の色は、ユーザーが長いテーブルをより簡単にスキャンするのに役立ちます。次のことでこれを行うことができます:nth-child(even) selector：

 TR：nth-​​child（偶数）{
  バックグラウンドカラー：＃f9f9f9;
}

相互作用のためのホバー効果

行にホバー効果を追加すると、ユーザーがクリック可能なアイテムまたは選択可能なアイテム（特にダッシュボードで役立つ）と対話していることをユーザーが知ることができます。

 TR：ホバー{
  バックグラウンドカラー：＃f1f1f1;
}

境界と丸い角

すべてのセルの周りに目に見える境界線が必要な場合は、 border-collapseスキップして、代わりに個々の境界を使用してください。また、 overflow-x: auto;モバイルの応答性については良い考えです。

テーブル {
  境界線崩壊：別々;
  境界面：0;
}

th、td {
  ボーダー：1pxソリッド#ccc;
}

.table-wrapper {
  オーバーフローX：自動;
}

テーブルを応答します

HTMLテーブルの最大の問題点の1つは、モバイルに優しいものにすることです。ニーズに応じていくつかのアプローチがあります。

スクロール可能な容器に包みます

これは最も簡単なソリューションです。テーブルをdivに包み、水平スクロールを適用してください。

 <div class = "table-wrapper">
  <表> ... </table>
</div>

 .table-wrapper {
  オーバーフローX：自動;
}

小さな画面でカードに変換します

より高度なレイアウトの場合、メディアクエリを使用して、テーブルレイアウトを小さな画面でカードのようなものに切り替えることができます。これにはより多くの作業が必要であり、通常display: blockまたはフレックス/グリッドレイアウトを使用してHTMLを再構築することが含まれます。

簡単な例：

 @media（max-width：600px）{
  テーブル、thead、tbody、th、td、tr {
    表示：ブロック;
  }

  th {
    位置：粘着性;
    上：0;
    背景：白。
    z-index：1;
  }
}

それは完璧ではありませんが、スペースがきついときにジョブが完了します。

最後のタッチとヒント

• アクセシビリティを忘れないでください。スクリーンリーダーがデータを適切に関連付けることができるように、ヘッダーにscope="col"を使用してください。
• テーブルに多くの列がある場合は、メディアクエリとdisplay: none小さな画面に重要性の低いものを隠すことを検討してください。
• 過度に複雑なスタイリングを避けてください。データが多いテーブルに最適にシンプルに機能する場合があります。
• デバイスとブラウザでテーブルをテストします。一部の古いブラウザは、特定のCSSプロパティを完全にサポートしていない場合があります。

これは、CSSを使用したHTMLテーブルのスタイリングの必需品をカバーしています。それは複雑ではありませんが、物事を面白く保つのに十分なエッジケースとブラウザの癖があります。ただし、それを手に入れると、テーブルは管理がはるかに簡単になります。

以上がスタイリングHTMLテーブルに関する完全なCSSチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。