techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

テーブル(table)の利用

2010/10/19 未分類

今日の授業は、「テーブル=表の利用」でした。tableタグを使います。

テーブルといえばかつては、これで、レイアウトをしていました。CSSがまだなかった、というか使ってなかった時代です。

サイトづくりをはじめた、1997年ころは、まだ、テーブルを切って、デザインを組んでいました。当時キャナルシティのウェブサイトもこれで、作成しました。
いま考えるととても煩雑なコードになっていたと思います。

HTML+CSSは、理論的にスリムなので、やっていて気持ちがいいものです。

で、今日の授業は、tableタグの基本的な使い方。tr、tdタグを要素として使います。行の数だけ、trを用意して、中に必要な数だけtdを入れるというとてもシンプルなスタイルです。

項目名に使いたいセルは、tdをthに変えてあげると、太字・中央揃えになります。

tableタグは、そのままでは、枠線が表示されないので、boarderで指定します。普通はCSSを使いますが、CSSを読まないブラウザ対策として、一応HTML側でborderを残しておきます。

表のタイトルは、captionタグでつけます。実践では使わないことが多いですが、つける習慣にしておくといいですね。うまくCSSデザインすれば、見栄えもよくなるでしょう。

summary属性は、表の説明文。ブラウザ上に表示はされませんが、検索エンジン対策のためにもキーワードなどを仕込んでおきたいところです。

表のデザインも、CSSでコントロールします。ボーダーの表示形式は、colllapseプロパティで、1本線にしておきましょう。