CSSでHTMLテーブルの枠線スタイルを設定する方法

テーブルの境界線スタイルを設定する方法: 1. 「border: 境界線の幅、境界線のスタイル、境界線の色」スタイルをテーブル要素に追加して、テーブル全体の境界線スタイルを設定します; 2. 「border」を追加します。 td要素の枠線スタイル「枠線の色」スタイルに「枠線の幅」を設定することで、セルごとに枠線のスタイルを設定できます。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS 表の枠線スタイルを設定する方法

表に CSS スタイルの枠線を設定する場合は、いくつかの状況に分かれます。
1. 表のみに枠線を設定します
2 td Border を設定します

観察を容易にするために、すべてのケース テーブルは例として 1px の実線の赤い境界線に設定され、テーブルの幅は 400px、テーブルは 3 列 3 行です。この場合、テーブルの外層に p ボックスが追加され、それぞれ「.table-a」、「.table-b」と名前が付けられます。

#1. テーブル ラベルの境界線スタイルのみを設定します

##テーブル ラベルの境界線スタイルのみを設定します。このテーブルの最も外側のテーブルには枠線が付きますが、テーブルの内側には枠線スタイルは生成されません。

ケースの詳細は次のとおりです:

対応する CSS コード

<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 サイトの他の関連記事を参照してください。