HTMLテーブルをスタイルシートで
TABLEタグを使うと、表形式のレイアウトを簡単に作成することができますが、テーブルタグだけだとデザインのシンプルな一覧となってしまいます。
そこで、スタイルシートを利用した枠線ありのHTMLテーブルタグ作成ツールの紹介です。枠線の色や文字の色、背景色と行・列数の指定で、デザインされた一覧表が簡単に自動作成されるジェネレーターです。
まずは、「プレビュー」ボタンを押して、tableの表示イメージを確認してみましょう。
テーブルタグを作成してみよう
HTMLタグを作成すると、クリップボードへ自動でコピーされます。下のテキストボックスからも選択できます。
手順は次の通りです。
- 「列数・行数」で表の列と行数を指定する。
- 「見出し行有無」で見出しが必要な場合は、見出しを指定する。
- 「表の罫線」で枠線の色・幅を指定する。
- 「通常行」にて、文字色と背景色を指定する。
これでテーブルタグの完成です。早速やってみましょう。
テーブルタグを簡単作成ツールでは
この、テーブルHTMLタグ作成ツールでは、次のHTMLタグを使用しています。
- ブロック要素 <div>〜</div>
- テーブル(表) <table>〜</table>
カスケーディングスタイルシート(CSS)を使っています。
TABLEタグを使うと、表のレイアウトが簡単にできます。四角の枠線を使い、行と列をうまく組み合わせてデータを綺麗に並べてみましょう。
本ツールでは、JavaScript を使用しています。したがって、JavaScriptが使用できない設定になっているブラウザでは、使用することが出来ません。
ブラウザのJavaScriptを実行可能に設定して、ご利用ください。
無料ツールとなっております。リンクもフリーです。テーブルデザインにご利用ください。
見出し行はセンター位置、通常行は左寄せ位置になっています。各セル内の位置を変更したい場合は、HTML表 テンプレートをご利用ください。