ホームページ作成

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

テーブル（表）の作成・装飾 (HTML,CSS)

更新日：2004年03月21日

線種が豊富な表を作りたい！（後編）

西村文宏

ワープロや表計算ソフトで作成できるような、実線・点線・破線・二重線、太線・細線…など、様々な線を活用した表を、ホームページ上でも作ってみませんか？様々な線種の表を簡単に作成する方法をご紹介！＜後編＞

前編の冒頭でご紹介した表のソース

最後に、前編の冒頭でもご紹介した、次の表のソースを掲載しておきます。

■サンプル1

No.	日付	予定
1	2004/03/19	大学卒業式
2	2004/03/23	大学院卒業式
3	2004/04/01	大学入学式
4	2004/04/03	大学院入学式

<!-- スタイルシート部分 -->
<style type="text/css">
table.sample1 {
   border-width: 2px;
   border-color: darkblue;
   border-style: solid;
   border-collapse: collapse;
}
table.sample1 th {
   border-width: 1px;
   border-color: black gray;
   border-style: solid dotted;
   padding: 3px;
   background-color: #eeffff;
}
table.sample1 td {
   border: 1px gray dotted;
   padding: 3px;
}
</style>

<!-- HTML部分 -->
<table class="sample1">
<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>

■サンプル2

No.	日付	予定
1	2004/03/19	大学卒業式
2	2004/03/23	大学院卒業式
3	2004/04/01	大学入学式
4	2004/04/03	大学院入学式

<!-- スタイルシート部分 -->
<style type="text/css">
table.sample2 {
   border-width: 4px;
   border-color: green;
   border-style: double;
   border-collapse: collapse;
}
table.sample2 th {
   border: 1px green;
   border-style: solid dashed;
   padding: 3px;
   background-color: #ffffdd;
}
table.sample2 td {
   border: 1px green;
   border-style: solid dashed;
   padding: 3px;
}
</style>

<!-- HTML部分 -->
<table class="sample2">
<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>

おわりに

今回は、スタイルシートを活用することで、様々な線種を用いた表が作成できることをご紹介致しました。

スタイルシートを使い慣れていない方々は、最後にご紹介したソースをそのままコピー＆ペーストしてみて、このソースを書き換えていく形で、いろいろ試してみると、分かりやすいと思います。ぜひ、様々なデザインの表を作成してみて下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！