ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

枠線を重ねて表示する

{border-collapse:collapse;}でテーブルの枠線を重ねて表示するこ とが出来ます。下の例でわかるように通常のテーブルはテーブルの外枠と内枠の間隔が ありますがこの指定をすることでセルと外枠の線が重なって表示されます。

【ブラウザ表示】

枠線が 重なってません。

通常の枠線を重ねると↓

枠線が重なってます。

ソース

<table class="sample2">
<tr>
<td class="sample2a">枠線が</td><td class="sample2a">重なってます。</td>
</tr>
</table>

外部ファイル

table.sample2{
border-collapse:collapse;
border:1px black solid;
}
td.sample2a{border:1px black solid;}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; border-collapse:collapse;">
<tr>
<td style="border:1px black solid;">枠線が</td>
<td style="border:1px black solid;">重なってます。</td>
</tr>
</table>

■ 外枠と内枠の線の間隔をあける

{border-collapse:separate;}でテーブルの外枠の線と 内枠の線の間隔をあけることができます。

【ブラウザ表示】

枠線同士の間隔があいています。

ソース

<table class="sample2b">
<tr>
<td class="sample2c">枠線同士の</td>
<td class="sample2c">間隔があいています。
</td>
</tr>
</table>

外部ファイル

table.sample2b{
border-collapse:separate;
border:1px black solid;
}
td.sample2c{border:1px black solid;}


<body>〜</body>に直接記入する場合

<table style="border:1px black solid; border-collapse:separate;">
<tr>
<td style="border:1px black solid;">枠線同士の</td>
<td style="border:1px black solid;">間隔があいています。</td>
</tr>
</table>

■ その他の項目

枠線の太さ、色、種類を指定する
テーブルやセルの幅、高さを指定する
外側、内側の余白を指定する
セルの文字の位置を指定する
テーブルに文字を回り込ませる
テーブルやセルに背景色を指定する
テーブルやセルに画像を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.