CSS コントロールテーブル style_html/css_WEB-ITnose-htmlチュートリアル-php.cn

テーブルは HTML で比較的密度の高い情報を表示するために使用され、HTML の初期の頃からサポートされてきました。テーブルの HTML マークアップは、他の要素のマークアップよりもはるかに複雑です。また、ブラウザには

タグのデフォルトスタイルが多数用意されているため、テーブルの書式設定動作もより複雑になります。この記事では、テーブルの境界線モデルと、CSS3 を使用してストライプのスタイルを設定し、視覚的なフィードバックを提供する方法について説明します。

HTML マークアップ

基本的なテーブルマークアップは次のようになります:

<table>  <tr>    <th>Firstname</th>    <th>Lastname</th>  </tr>  <tr>    <td>Bill</td>    <td>Gates</td>  </tr>  <tr>    <td>Steven</td>    <td>Jobs</td>  </tr></table>

ログイン後にコピー

Chrome によって指定されたデフォルトスタイルでは次のようになります:

テーブル境界線モデル

CSS 標準境界線には 2 種類のテーブルがありますモデル: 分離と崩壊。別個のモデルでは、テーブル内の隣接するセルの境界線が分離され、境界線の間隔はテーブルの境界線の間隔によって指定されます。これは多少直観に反しますが、分離モデルはほとんどのブラウザでデフォルトです ( border-collapse: Separate )。セルの境界線を設定した後の効果を確認できます:

td, th {  border: 1px solid #666;}

ログイン後にコピー

セルの境界線が分離されていることがわかります:

モデルを折りたたむように設定すると、境界線がマージされます:

table{  border-collapse: collapse;}

ログイン後にコピー

Distinguish奇数行と偶数行

セルは、多くの場合、ピアリングセル間の視覚的な関連性を犠牲にして、美的理由から幅が広くなります。これにより、ユーザーが一連の情報を追うことが困難になります。奇数行と偶数行を区別し、ストライプを追加するテーブルストライプクラスがブートストラップで提供されます。その効果は次のとおりです。

実装も CSS3 の :nth-child() 疑似クラスを使用して非常に簡単です。

tr:nth-child(odd){  background: #f9f9f9;}

ログイン後にコピー

ここで、奇数はキーワードです。数値、n を含む関数なども使用できます。CSS 疑似クラスの詳細については、「CSS セレクターの概要」の記事を参照してください。

視覚的なフィードバック

ユーザーが行の情報を追跡しやすくするために、奇数行スタイルと偶数行スタイルを区別することに加えて、マウスが配置されている行を強調表示することもできます。また、視覚的なフィードバックによって間違いなく使いやすさが向上しますが、視覚的なフィードバックを乱用するとページが乱雑に見える可能性があることにも注意してください。特定のスタイルの選択は、全体のデザインと一致する必要もあります。

カーソルが置かれている行を強調表示することは、奇数番号の行を強調表示することと非常に似ています。ここでは :hover 疑似クラスを使用する必要があります。通常、ヘッダー内の行を強調表示する必要はないことに注意してください。

れーい

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS コントロールテーブル style_html/css_WEB-ITnose

HTML マークアップ

テーブル境界線モデル

Distinguish奇数行と偶数行