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

テーブルは HTML で比較的密度の高い情報を表示するために使用され、HTML の初期の頃からサポートされてきました。 テーブルの HTML マークアップは、他の要素のマークアップよりもはるかに複雑です。また、ブラウザには f5d188ed2c074f8b944552db028f98a1 タグのデフォルト スタイルが多数用意されているため、テーブルの書式設定動作もより複雑になります。 この記事では、テーブルの境界線モデルと、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 疑似クラスを使用する必要があります。 通常、ヘッダー内の行を強調表示する必要はないことに注意してください。

れーい