ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

線種が豊富な表を作りたい!(前編)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

点線だって使いたい

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

スタイルシートを使えば、簡単にこのような様々な線種を使った表が実現できます。今回は、このような表の作成方法をご紹介致します。

今回のテクニックで実現できる表

次のような表が作成できます。

■外側が太い実線で藍色、内側が細い点線で灰色。

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

■外側が二重線、内側の横線が細い実線、縦線が細い破線。線の色は緑色。

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

スタイルシートを使って

これらの実現には、スタイルシートを利用します。
スタイルシートでは、実線・点線・破線・二重線が利用できますので、これらの線種を組み合わせて、表をデザインすることができます。

それでは、具体的な記述方法をご紹介していきましょう。

それでは、次のページへ! →

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます