ホームページ作成
テーブル(表)の作成・装飾 (HTML,CSS)
HTMLやスタイルシート(CSS)を使ったテーブル(表)の作成、装飾方法について解説しました。
記事一覧
-
floatを使わずにCSSのtable-cellを使う段組の作り方
floatプロパティを使わなくても、段組(マルチカラム)は作成できるfloatプロパティで段組を作る場合CSSで段組構造(マルチカラムレイアウト)を作る場合、floatプロパティを活用する方法がよく使われます。しかし、この方法は「ボックスのサイズを決めて、左右に浮かせて配置する」という若干面倒...続きを読む
-
TablesorterでHTMLの表をソート(並び替え)可能にする
table要素で作った表にもソート(並べ替え)機能を加えたい!ウェブ上でも、表をソートしたいウェブ上に表形式で何らかのデータを掲載する場合、Excelなどの表計算ソフトと同様にソート(並べ替え)したいと思うこともあるでしょう。例えば、右図のように都道府県別のデータを掲載する場合は、五十音順に並...続きを読む
-
tableの幅を均等に指定する方法!HTML+CSSでのやり方
HTMLのtable要素で作った表のカラム幅はCSSで均等にできるHTMLのtable要素で表を作成すると、何も指定しなければ行の高さも列の幅も可変長なので、各セルに含まれる文字に合わせて自動でサイズが決まります。下図のように、特定の列(カラム)だけで極端に文字数が少ない場合は、バランスの悪い...続きを読む
-
テーブルの見出しだけ立体的にする
テーブル(表組み)を作る際、ただ枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しに相当するセルだけ、立体的に見えるよう装飾してみましょう。 ...続きを読む
-
スタイルシートで表を見やすく装飾!
※この記事は、「スタイルシートでワープロ並みに表を装飾!」から始まる解説記事の第3弾です。 以下のような表を作ることを例にして、HTMLやスタイルシートの記述方法をステップごとに説明しています。table.moenovels244a { border-collapse: collapse; b...続きを読む
-
スタイルシートでワープロ並みに表を装飾!
表の罫線をワープロ並みに装飾したいスタイルシートを活用すれば、表の罫線を様々に装飾することができます。 今回は、ステップごとにその装飾方法をご紹介致します。必要な装飾方法を1つずつ解説していますので、今まで表の装飾をあまり試したことのない方々でも、すぐに実践できるようになると思います。 ぜひ試...続きを読む
-
スタイルシートでワープロ並みに表を装飾2
※この記事は、「スタイルシートでワープロ並みに表を装飾!」から始まる解説記事の第2弾です。 以下のような表を作ることを例にして、HTMLやスタイルシートの記述方法をステップごとに説明しています。table.moenovels244a { border-collapse: collapse; b...続きを読む
-
マウスが乗った行だけ装飾を変化させる
div.sourcecode { background-color: #eeeeee; padding: 4px 4px 4px 20px; margin: 12px; line-height: 1.4; font-family: monospace;} リンクの上にマウスを乗せたときに、リ...続きを読む
-
セル全体が立体的に見える表組みを作る
セル全体が立体的に見える表スタイルシートを使えば、セル1つ1つの周囲の枠線もデザインできます。 これを活用すると、以下のような「セル全体が立体的に見える表」を作ることができます。 なかなか見栄えがよいと思いませんか? ...続きを読む
-
表のセンタリング方法の謎
span.strong { font-weight: bold; } 表をセンタリングできますか? 表は、table要素などを活用して作ることができますね。 この表をスタイルシートを使ってセンタリングしたい(中央に寄せたい)場合、どう記述すれば良いでしょうか?表のセンタリングは、少々単純には...続きを読む