HTML/CSS {Article004}

説明文の表示 ライブデモを見る▶
ようこそ「HTML/CSS」へ...

HTMLのTABLEタグをフォーマットする

ここではHTMLのtableタグにCSSを適用して罫線付きの表を作成する方法を解説します。 さらに、表をシマウマ模様のように行毎に異なる背景色を表示して見やすくする方法についても解説します。

click image to zoom!
図1: 表を見やすくする

作成手順

Coming soon...

操作手順

  • サンプルが表示されたら黄色の[Apply CSS!]ボタンをクリックします。

  • 表にCSSが適用されてフォーマットされます。 この状態でさらに[Hilight Edit/Insert Rows!]ボタンをクリックします。

  • 編集行と挿入行にCSSが適用されてフォーマットされます。

Live DEMO

TABLE - Apply CSS Styles

Rows:10 1/2 (Page Size:5)
? HeaderRow.Col1 HeaderRow.Col2 HeaderRow.Col3
Item1.Row1.Col1 Item1.Row1.Col2 Item1.Row1.Col3
Item2.Row2.Col1 Item2.Row2.Col2 Item2.Row2.Col3
Item4.Row4.Col1 Item4.Row4.Col2 Item4.Row4.Col3
Item5.Row5.Col1 Item5.Row5.Col2 Item5.Row5.Col3
Rows:10 1/2 (Page Size:5)