*

ウェッブ制作・パソコン

Width =px

ホーム > UL・OL・DLリストとテーブル・メニュー概要 >
CSSでカウンタ付テーブル・汎用型 MENU 

CSSでテーブルにカウンタを付ける・列幅に自由に対応したテーブル

要約 : (tr)にCSSの「counter-increment」を利用してカウンタを付ける。更に、行内の列(td)にも連番を入れています。簡単な規則宣言(設置、加算、表示)で表示出来ます。

テーブルに2つのクラスを設定し、1つ目はサイト全体の構造で列数は個別に設定する。列幅は2つ目のクラスを指定することで、テーブル作成が手間をかけずに設置出来ます。

連番 ひらがな カタカナ 英大文字 英小文字
あいうえお アイウエオ AIUEO aiueo
かきくけこ カキクケこ KAKIKUKEKO kakikukeko
さしすせそ サシスセソ SASHISUSESO sashisuseso
たちつてと タチツテト TACHITHUTETO tachithuteto
なにぬねの ナニヌネノ NANINUNENO naninuneno

html記述 2つ目のクラス(tbl_a)で列幅を設定

css

  • Line
  • 説明
  • 3-8
  • テーブルの基本構造と罫線設定
  • 9-13
  • 表示内容の体裁を整える部分なので、記述しなくても可。
  • 16-17
  • カウンタ値の列幅設定。残り4列は均等幅なので、テーブルの自動設定に。
  • 20-24
  • カウンタの設置・加算・表示。コメントを参照下さい。
  • 25-34
  • カウンタ表示の修飾なので、記述しなくても可。
  • 37-
  • 行単位で列に連番を付けるCSSです。あまり利用しないと思いますが、参考までに。行で初期化しているのがポイントです。