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

floatプロパティを使わなくても、段組(マルチカラム)は作成できるfloatプロパティで段組を作る場合CSSで段組構造(マルチカラムレイアウト)を作る場合、floatプロパティを活用する方法がよく使われます。しかし、この方法は「ボックスのサイズを決めて、左右に浮かせて配置する」という若干面倒な方法...続きを読む

table要素で作った表にもソート(並べ替え)機能を加えたい！ウェブ上でも、表をソートしたいウェブ上に表形式で何らかのデータを掲載する場合、Excelなどの表計算ソフトと同様にソート(並べ替え)したいと思うこともあるでしょう。例えば、右図のように都道府県別のデータを掲載する場合は、五十音順に並べ替え...続きを読む

HTMLのtable要素で作った表のカラム幅はCSSで均等にできるHTMLのtable要素で表を作成すると、何も指定しなければ行の高さも列の幅も可変長なので、各セルに含まれる文字に合わせて自動でサイズが決まります。下図のように、特定の列(カラム)だけで極端に文字数が少ない場合は、バランスの悪い表に見...続きを読む

テーブル（表組み）を作る際、ただ枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しに相当するセルだけ、立体的に見えるよう装飾してみましょう。立体的に見せるためのグラデーション部分は、背景画像を使うことで実現しています。枠線の装飾や背景色、背景画像の...続きを読む

※この記事は、「スタイルシートでワープロ並みに表を装飾！」から始まる解説記事の第3弾です。以下のような表を作ることを例にして、HTMLやスタイルシートの記述方法をステップごとに説明しています。table.moenovels244a{border-collapse:collapse;border:2p...続きを読む

表の罫線をワープロ並みに装飾したいスタイルシートを活用すれば、表の罫線を様々に装飾することができます。今回は、ステップごとにその装飾方法をご紹介致します。必要な装飾方法を1つずつ解説していますので、今まで表の装飾をあまり試したことのない方々でも、すぐに実践できるようになると思います。ぜひ試してみて下...続きを読む

※この記事は、「スタイルシートでワープロ並みに表を装飾！」から始まる解説記事の第2弾です。以下のような表を作ることを例にして、HTMLやスタイルシートの記述方法をステップごとに説明しています。table.moenovels244a{border-collapse:collapse;border:2p...続きを読む

div.sourcecode{background-color:#eeeeee;padding:4px4px4px20px;margin:12px;line-height:1.4;font-family:monospace;}リンクの上にマウスを乗せたときに、リンク文字の色や背景色を変化させるには、...続きを読む

セル全体が立体的に見える表スタイルシートを使えば、セル1つ1つの周囲の枠線もデザインできます。これを活用すると、以下のような「セル全体が立体的に見える表」を作ることができます。なかなか見栄えがよいと思いませんか？▲セル全体が立体的に見える表一部をへこんでいるように見せることもできます。▲一部のセルが...続きを読む

span.strong{font-weight:bold;}表をセンタリングできますか？表は、table要素などを活用して作ることができますね。この表をスタイルシートを使ってセンタリングしたい（中央に寄せたい）場合、どう記述すれば良いでしょうか？表のセンタリングは、少々単純にはいきません。本来は単純...続きを読む