ホームページ > 記事 > ウェブフロントエンド > CSSでHTMLテーブルの枠線スタイルを設定する方法
テーブルの境界線スタイルを設定する方法: 1. 「border: 境界線の幅、境界線のスタイル、境界線の色」スタイルをテーブル要素に追加して、テーブル全体の境界線スタイルを設定します; 2. 「border」を追加します。 td要素の枠線スタイル「枠線の色」スタイルに「枠線の幅」を設定することで、セルごとに枠線のスタイルを設定できます。
このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
表に CSS スタイルの枠線を設定する場合は、いくつかの状況に分かれます。
1. 表のみに枠線を設定します
2 td Border を設定します
観察を容易にするために、すべてのケース テーブルは例として 1px の実線の赤い境界線に設定され、テーブルの幅は 400px、テーブルは 3 列 3 行です。この場合、テーブルの外層に p ボックスが追加され、それぞれ「.table-a」、「.table-b」と名前が付けられます。
<style> .table-a table{ border:1px solid #F00 } /* css注释:只对table标签设置红色边框样式 */ </style>対応する HTML コード フラグメント
<p class="table-a"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">1</td> <td width="181">2</td> <td width="112">3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </p>
効果:
2. td
の境界線を設定します。テーブルの場合 table td 境界線のスタイルを設定します。テーブル オブジェクト内の td は境界線のスタイルを実装しますが、中央の td では二重境界線が表示されます。
対応する CSS コード
<style> .table-b table td{ border:1px solid #F00 } /* css注释:只对table td标签设置红色边框样式 */ </style>
対応する HTML ソース コードのフラグメント
<p class="table-b"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">1</td> <td width="181">2</td> <td width="112">3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </p>
効果:
学習ビデオ共有:css ビデオ チュートリアル
以上がCSSでHTMLテーブルの枠線スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。