TOP 色々なCSS ≫テーブルについて(境界線の表示方法の指定)

tableをスタイルシートでレイアウトする

何かと便利に使うことのできる「table」タグですが、このtableタグについてもスタイルシートで設定をすることができます。


tableに関してのスタイルシート

テーブルの各セルの境界線やセル間隔など、テーブル全体に対してのスタイルシートの紹介です。

テーブルの境界線の表示方法を設定する。

テーブルの境界線の表示方法の指定には

border-collapse:表示方法の指定

というスタイルを設定します。
表示方法の指定には、下の2種類があります。

記述例 説明
collapse 境界線を重ねて表示する (※初期設定)
separate 境界線の間隔を空けて表示する

それでは、実際に記述してみましょう。

<記述例>

【CSS記述】
table {width: 500px;}
table,th,td,tr{ border: 1px solid #333; }
<!--境界線を重ねて表示--!>
.sam1{border-collapse:collapse}
<!--境界線の間隔を空けて表示--!>
.sam2{border-collapse:separate}


【HTML記述】


<table border="1" class="sam1">
<tr>
<th colspan="2">
※sample1 (border-collapse:collapse)の場合</th>
</tr>
<tr>
<td>
セル1</td>
<td>
セル2</td>
</tr>
<tr>
<td>
セル3</td>
<td>
セル4</td>
</tr>
</table>



<table border="1" class="sam2">
<tr>
<th colspan="2">
※sample2. (border-collapse:separate)の場合</th>
</tr>
<tr>
<td>
セル1</td>
<td>
セル2</td>
</tr>
<tr>
<td>
セル3</td>
<td>
セル4</td>
</tr>
</table>

表示サンプルはこちら

前ページに戻る 次ページへ進む 次ページへ進む
特集

HP作成ソフト徹底比較

ホームページビルダー・ドリームウィ―バー徹底比較

HP作成ソフトの代名詞であるホームページビルダーと、プロご用達の本格派、ドリームウィ―バーについて徹底比較してみました。

inserted by FC2 system