HTML4.01、XHTML1.1が全盛の時代に、table要素をレイアウト用に使うのは非推奨とされてきました（レイアウト用に使ってもSEO的な問題はあまりなかったようですが）。ちなみに、HTML5では表組としてのtable要素は残るものの、HTML4.01時代のcellpadding属性、cellspacing属性、border属性、frame属性、width属性、rules属性が廃止されて、summary属性のみが残るようです。

既成のhtmlに今回のサンプルのような表組のようで表組でないものを追加する際、tabl要素は簡単便利だったのですが、他の要素を模索するしかありません。そこでtable要素の代替えです。

また、HTML5ではiframe以外のframe要素も廃止になったので、左右のサイドにメニューを表示してメインコンテンツを切り替える、といった使い方にframe要素は使えません。今回のサンプルはその代替えとしても利用できるかもしれません。

（１）は親要素（div）に「display:flexbox」を使い、widthを%で左右に分けた子要素2つ入れています。
（２）と（３）は親要素（div）に「display:table」を使い、widthを%で分けた子要素に「display:table-cell」を指定しています。table要素と同じような動きをするので、「border-collapse:collapse;」も有効です。（１）は「border-collapse:collapse;」が効かず、隣り合った部分のborderが二重になるため、子要素どちらかの隣り合った部分のborderを消しています。

（１）「display:flexbox」を使用

  • メニューアイテム01
  • メニューアイテム02
  • メニューアイテム03
  • メニューアイテム04
[ダミーテキスト]　
ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。 取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。 

.bunkatu {
	display: -webkit-box;	/* ----webkit---- */
	display: -moz-box;		/* ----Firefox---- */
	display: -ms-flexbox;	/* ----IE---- */
	display: -o-flexbox;	/* ----Opera---- */
	display: flexbox;
	}

（２）「display:table」を使用、2カラム

  • メニューアイテム05
  • メニューアイテム06
  • メニューアイテム07
  • メニューアイテム08
[ダミーテキスト]
なお、対価の減額又は割戻しであっても、
[1] 懸賞によって減額又は割戻しの相手方を決定する場合、
[2] 減額又は割戻しをした金銭の使途を限定する場合、（例：旅行費用に充当させる場合）

.bunkatu2 {
	display: table;		/* ----親要素---- */
	border-collapse:collapse;
	}
.left2	{
	display: table-cell;		/* ----子要素左---- */
	}
.right2	{
	display: table-cell;		/* ----子要素右---- */
	}

（３）「display:table」を使用、3カラム

  • メニューアイテム09
  • メニューアイテム10
  • メニューアイテム11
  • メニューアイテム12
[ダミーテキスト]
[3] 同一の企画において景品類の提供とを併せて行う場合、 （例：取引の相手方に金銭又は招待旅行のいずれかを選択させる場合）
[ダミーテキスト]
は値引とは認められず景品類に該当することとなり，景品規制が適用されます。

.right3	{
	display: table-cell;		/* ----右側に子要素追加---- */
	}

戻るボタン