完成した効果は以下の通りです。
2. テーブルの暗い境界線 (bordercolordark) と明るい境界線 (bordercolorlight) 属性を使用して、細い線のテーブルを作成します。
または、Ctrl+Alt+T を押してテーブルを挿入し、ダイアログ ボックスに示されているように設定します (赤いボックスの項目は固定されています。それ以外の場合は効果がありません)。
テーブルを選択した後、F9 を押して「タグインスペクター」パネルグループを展開し、以下に示すように「属性」パネルで設定を行います。
完了後は次のようになります。
3. テーブルの CSS 属性 border-collapse を折りたたみに設定します。 Ctrl+Alt+T を押してテーブルを挿入します。ダイアログ ボックスの設定は方法 2 と同じです。テーブルを選択し、プロパティ パネルでテーブルの境界線の色を設定します。
F9 キーを押して「タグインスペクター」パネルを展開し、「属性」パネルの「スタイル」に「border-collapse:collapse;」と入力します。
完了後は次のようになります。
注: 方法 3 で作成された細線テーブルは、IE5+ にのみ適しています。最も互換性のある方法は方法 1 です。方法 2 は、厳密な意味では細線テーブルではありません。
ヒント: 方法 1 では、CSS を使用して表のセルの背景色を定義し、コードの量を減らすことができます。
<スタイル>
.thin{背景:#000000}
.thin td{背景:#FFFFFF}
</スタイル>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</テーブル>