線種が豊富な表を作りたい！（前編）(3ページ目)

枠線と中身の間隔をもっと広げるには？

枠線と文字の間隔をもう少し広げる指定も簡単です。

padding: 3px;

paddingプロパティを使えば、「枠線」と「枠の中身」との距離を指定することができます。上記では、「 3px 」と記述していますので、3ピクセルの間隔が開くことになります。

先の例より、枠線と文字との間隔が広がっています。

具体的にどう記述すれば…？

さて、スタイルの記述を断片的にご紹介してきましたので、具体的にHTML中にどう記述すれば良いのか、よく分からなかった方々もいらっしゃると思います。
そこで、上記の表を構成するスタイルシートとHTMLのソースを以下にまとめて掲載しておきます。
※ソースをまるごとコピーしてHTMLに貼り付けてから、いろいろ書き換えて実験してみて下さい。

<!-- スタイルシート部分 -->
<style type="text/css">
table.sample {
   border: 3px solid blue;
   border-collapse: collapse;
}
table.sample th, table.sample td {
   border: 1px dashed blue;
   padding: 3px;
}
</style>

<!-- HTML部分 -->
<table class="sample">
<tr><th>No.</th><th>日付</th><th>予定</th></tr>
<tr><td>1</td><td>2004/03/19</td><td>大学卒業式</td></tr>
<tr><td>2</td><td>2004/03/23</td><td>大学院卒業式</td></tr>
<tr><td>3</td><td>2004/04/01</td><td>大学入学式</td></tr>
<tr><td>4</td><td>2004/04/03</td><td>大学院入学式</td></tr>
</table>

※上記のソース中の「 sample 」とは、クラス名です。1つのHTMLソース中に複数の表を別々のスタイルで表示させるために、クラス名を付けています。 このクラス名は、「 sample 」でなくても「 mytable 」など何でも構いません。また、1ページ内に表が1つだけの場合や、全ての表が同じスタイルで良い場合などは、クラス名を省略しても構いません。

指定できる線種は？

線種には、次の4種類があります。

また、これらの他にも、へこんでいるように見せたり、出っ張っているように見せたりする指定などもあります。線種について詳しくは、記事「色も線種も線幅も自由な枠を作る」をご参照下さい。

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

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

スタイルシートには、もっと細かく指定する方法が用意されていまして、それを活用すれば、縦と横で別々の線種にしたりもできるのです。

……というところで、紙幅が尽きてしまいましたので、続きは次回にご紹介致します。

（続きの記事）「様々な線種を使った表を作りたい」へ →

【関連記事】

• 色も線種も線幅も自由な枠を作る
• 縞模様の枠を作ろう！
• リンクの下線を装飾したい