【ホームページ作成】線種が豊富な表を作りたい！（後編）

いろんな線種で表を作りたい！

ワープロや表計算ソフトで表を作成すると、 実線・点線・破線、太線・細線、青色の線・赤色の線…など、様々な線を活用した表が簡単に作成できます。そのような表を、ウェブ上でも作ってみましょう。

スタイルシートを使えば、簡単に様々な線種を使った表が作れます。
前回の記事「外が実線・内が点線の表を作る」では、外側を太線・内側を点線で描く表の作成方法をご紹介致しました。 今回は、もっと多くの線種を使って表を作る方法をご紹介致します。

横線と縦線を別々に指定するには？

さて、横線と縦線を別々に指定するにはどうすれば良いでしょうか？

いくつかの書き方がありますが、例えば、次のように書くことで実現できます。

■四辺のスタイルを別々に指定

tr, td {
   border-top: 1px solid green;
   border-bottom: 1px solid green;
   border-left: 1px dashed gray;
   border-right: 1px dashed gray;
}

これは、枠線を

• 上線（border-top）
• 下線（border-bottom）
• 左線（border-left）
• 右線（border-right）

…に分けて、それぞれ個別に指定する方法です。
ここでは、上下を「緑色で1pxの実線（1px solid green）」、左右を「灰色で1pxの破線」（1px dashed gray）と指定しています。

上記の例では、『 1px solid green 』のように、線幅・線種・線色の順で指定していますが、この順番はどんな順番でも構いません。
※それぞれの値の間に、半角スペースが1つ必要です。

線種について詳しくは、記事「色も線種も線幅も自由な枠を作る」をご参照下さい。

■スタイルの種類別にまとめて指定

先の、四辺のスタイルを別々に記述する方法だと、「上下が同じデザイン、左右が同じデザイン」で構わない場合、 同じスタイルを2度ずつ記述しなければならず、少々無駄な気がします。

辺ごとでなく、スタイルの種類別に指定する方法もありますので、そちらを使ってみましょう。

その方法は、次のページで！ →