ホームページ作成/テーブル(表)の作成・装飾 (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. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます