裏技:罫線っぽい表現

表を使わずに罫線的な表現ができます。

使い方

 

使用できる線の種類

ソース
<div style="border-bottom:4px solid #7777cc;">...</div>

(実線の場合)
↓実線(solid)[IE5では表示できます]
↓点線(dotted)
↓鎖線(dashed)
↓二重線(double)[IE5では表示できます]
↓溝線(groove)[IE5では表示できます]
↓山線(ridge)[IE5では表示できます]
凹(inset)[IE5では表示できます]
凸(outset)[IE5では表示できます]
注意:
Netscape Communicator 4.7 やInternet Explorer5.0では表示できない線種があります。
 

使用例1:罫線で囲む

div のネストと border プロパティを使って罫線で段落の列を囲めます。
ソース
<div style="border:2px; dotted blue;">

  <div>...</div>

  <div>...</div>

<div>...</div>
(囲みの外)
罫線囲み
(点線)
(囲みの外)
注意:
Arkで囲みの中の先頭末尾の段落や、囲みの直前直後の段落を編集すると異常なことが起こる可能性があります。

使用例2:行間罫線

border-top, border-bottom プロパティを使って擬似的に行間(正確には段落間)罫線を設定します。
ソース
<div>...</div>

<div style="border-top:2px solid black;">...</div>

...

1行目
2行目
3行目

使用例3:ツリー罫線

ネストした div の親 に border-left と margin-left を付けて段落をツリー状に見せます。
ソース
<div style="border-left-width: 2px;border-left-color: #7777cc;border-left-style: solid;margin-left: 1em;margin-bottom: 0.5em;">
    <div>...1</div>
    <div>...2</div>
    <div style="border-left-width: 2px;border-left-color: #7777cc;border-left-style: solid;margin-left: 1em;margin-bottom: 0.5em;">
        <div>...2-1</div>
        <div>...2-2</div>
    </div>
    <div>...3</div>
    <div style="border-left-width: 2px;border-left-color: #7777cc;border-left-style: solid;margin-left: 1em;margin-bottom: 0.5em;">
        <div>...3-1</div>
        <div style="border-left-width: 2px;border-left-color: #7777cc;border-left-style: solid;margin-left: 1em;margin-bottom: 0.5em;">
            <div>...3-1-1</div>
            <div>...3-1-2</div>
        </div>
    </div>
    <div>...4</div>
</div>
...1
...2
...2-1
...2-2
...3
...3-1
...3-1-1
...3-1-2
...4