HTML テーブルから境界線を削除する

1. border-collapse CSS プロパティを使用して、HTML のテーブルのセルから境界線を削除する
2. HTML のテーブルから境界線を削除するには、CSS の border プロパティを none に設定する

この記事では、HTML テーブルから境界線を削除する方法を紹介します。テーブルセルに画像を挿入しながら、セルの境界線を削除する方法を学習します。

border-collapse CSS プロパティを使用して、HTML のテーブルのセルから境界線を削除する

HTML テーブルを使用して画像を挿入できます。テーブル内の要素にクラスを割り当て、CSS でクラスの属性を定義できます。このメソッドは、td 要素の高さと幅を設定し、background-image プロパティを使用して画像を挿入するのに役立ちます。したがって、各 td 要素に画像を挿入できます。このように画像を挿入すると、テーブルの各セルの境界線を確認できます。画像の見栄えを良くするために、セルとテーブルの境界線を削除することをお勧めします。このために、CSS の border-collapse プロパティを使用できます。プロパティの値を collapse に設定して、セルの境界線を結合することができます。これにより、セル間隔を 0 にすることができます。table タグで border 属性を使用しない場合、境界線は表示されません。

たとえば、HTML では、<table> タグを記述してから、その中に <tr> タグを記述します。<tr> タグ内に 3つの <td> タグを記述し、第 1、第 2、第 3 のクラスに left、midddle、right のクラスを記述します。CSS で、table タグを選択し、border-collapse プロパティを collapse に設定します。次に、left、middle、right の 3つのクラスすべてを一度に選択し、高さ、幅、背景画像を設定します。

以下の例では、3つの td 要素を作成し、それらの要素に画像を挿入しました。border-collapse プロパティを使用して、セルから境界線を削除しました。border-collapse プロパティを削除して、セルの境界線が画像をどのように表示するかを確認できます。

サンプルコード：

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

HTML のテーブルから境界線を削除するには、CSS の border プロパティを none に設定する

border プロパティを none に設定して、HTML テーブルから境界線を削除できます。このプロパティは、さまざまな border プロパティの省略形です。これらの異なるプロパティは、border-width、border-style、および border-color です。border プロパティを使用して none に設定すると、境界線は形成されません。

たとえば、上記で作成したテーブルを使用できます。上記の CSS を少し変更して、border プロパティを使用して目標を達成できます。テーブルから table、tr、および td タグを選択し、border プロパティを none に設定できます。このようにして、HTML でテーブルから境界線を削除し、テーブルのセルから境界線を削除できます。

サンプルコード：

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>