（元）社内SEの徒然なる日記 TABLEレイアウトで作ったWEBページをHTML5に対応させる実験

TABLEレイアウトで作ったWEBページをHTML5に対応させる実験

2014-07-29（Tue）

プログラミング

■　テーブルレイアウトの限界

10年くらい前に作ったWebシステムがあります。今までは騙し騙し使っていたのですが、IEのバージョンが11になったあたりで限界が見えてきました。

これまでは（IE6～IE10）、こんな感じで表示されていました。

それがIE11ではこうなりました。

目につく違いは、テーブルの枠の書式が変わったことと、セル内の文字位置の指定が無効（左寄せ）になったことですね。枠については妥協するとしても、セル内の文字位置はちょっと困ってしまいます。

■　現状

指定しているスタイルシート（testOld.css）はこうなっています。



/* 行の高さ */
.height40   {height: 40px;}

/* セルの幅 */
.colW60Right    {width:  60px; text-align:right; }
.colW60Left     {width:  60px; text-align:left;  }
.colW60Center   {width:  60px; text-align:center;}
.colW100Right   {width: 100px; text-align:right; }
.colW100Left    {width: 100px; text-align:left;  }
.colW100Center  {width: 100px; text-align:center;}
.colW200Right   {width: 200px; text-align:right; }
.colW200Left    {width: 200px; text-align:left;  }
.colW200Center  {width: 200px; text-align:center;}

/* テーブルの幅 */
.tableW180  {width: 180px; table-layout:fixed;}
.tableW300  {width: 300px; table-layout:fixed;}

実際のHTMLはこうなっています。



<HTML>
<LINK id="styleSheet" rel="Stylesheet" href="./testOld.css" type="text/css">
<TABLE class="tableW300" border="0" cellspacing="0">
	<COL class="colW100Left">
	<COL class="colW200Right">
	<TR>
		<TD>
			テスト表
		</TD>
		<TD>
			<TABLE class="tableW180" border="1" cellspacing="0">
				<COL class="colW60Left">
				<COL class="colW60Center">
				<COL class="colW60Right">
				<TR class="height40">
					<TD>○</TD>
					<TD>○</TD>
					<TD>○</TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
</TABLE>
</HTML>

やっていることは、こんな感じ。

①TABLEタグに横幅を指定（tableW300、tableW180...）
②COLタグでセルの横幅と文字位置を指定（colW100Left、colW60Center...）
③TRタグで行の高さを指定（height40）

ほぼ問題なく機能しているのですが、②文字位置を指定している text-align:left; あたりが使えないようです。

HTMLでは、TABLEタグの cellspacing 属性でセル同士の枠線の間隔を指定（0px）していたのですが、これも無効になっているようです。

■　変更

基本的にはこれまでの設定はそのまま残して、必要な定義を追加する方針にします。

まず、スタイルシートに定義を追加します。



/* 行の高さ */
.height40   {height: 40px;}

/* セルの幅 */
.colW60Right    {width:  60px; text-align:right; }
.colW60Left     {width:  60px; text-align:left;  }
.colW60Center   {width:  60px; text-align:center;}
.colW100Right   {width: 100px; text-align:right; }
.colW100Left    {width: 100px; text-align:left;  }
.colW100Center  {width: 100px; text-align:center;}
.colW200Right   {width: 200px; text-align:right; }
.colW200Left    {width: 200px; text-align:left;  }
.colW200Center  {width: 200px; text-align:center;}

/* テーブルの幅 */
.tableW180  {width: 180px; table-layout:fixed;}
.tableW300  {width: 300px; table-layout:fixed;}

/**************************
 * 以下、追加箇所
 **************************/

/* 見えないテーブル枠の作成*/
TABLE.borderZero {
	table-layout: fixed;                /* 列幅を先頭行で固定 */
	border-style: none;                 /* 枠線無し */
	border-width: 0px 0px 0px 0px;      /* 枠線は全て0px */
	border-collapse: collapse;          /* 隣接するセルの罫線をくっ付けて表示 */
	border-spacing: 0px 0px;            /* 左右0px、上下0px*/
}

/* 見えるテーブル枠の作成*/
TABLE.borderNormal {
	table-layout: fixed;                /* 列幅を先頭行で固定 */
	border-collapse: collapse;          /* 隣接するセルの罫線をくっ付けて表示 */
	border-spacing: 0px 0px;            /* 左右0px、上下0px*/
	border: 1px solid;                  /* 枠線を1px、一本線 */
}

/* セルの文字位置を設定します。*/
.middleLeft    {vertical-align: middle; text-align: left;}        /* 縦：中央 横：左 */
.middleRight   {vertical-align: middle; text-align: right;}       /* 縦：中央 横：右 */
.middleCente   {vertical-align: middle; text-align: center;}      /* 縦：中央 横：中央 */
.middleJustify {vertical-align: middle; text-align: justify;}     /* 縦：中央 横：両端揃え */

.topLeft    {vertical-align: top; text-align: left;}             /* 縦：上 横：左 */
.topRight   {vertical-align: top; text-align: right;}            /* 縦：上 横：右 */
.topCente   {vertical-align: top; text-align: center;}           /* 縦：上 横：中央 */
.topJustify {vertical-align: top; text-align: justify;}          /* 縦：上 横：両端揃え */

.bottomLeft    {vertical-align: bottom; text-align: left;}       /* 縦：下 横：左 */
.bottomRight   {vertical-align: bottom; text-align: right;}      /* 縦：下 横：右 */
.bottomCente   {vertical-align: bottom; text-align: center;}     /* 縦：下 横：中央 */
.bottomJustify {vertical-align: bottom; text-align: justify;}    /* 縦：下 横：両端揃え */

レイアウト用と表用でTABLEタグに指定する内容が異なるので、TABLE.borderZero と TABLE.borderNormal の２つを追加。さらに、セル内の文字位置を指定するために、TDタブ用に縦位置と横位置を指定する定義を追加。

これを利用してHTMLを修正します。



<HTML>
<LINK id="styleSheet" rel="Stylesheet" href="./testStyleSheet.css" type="text/css">

<TABLE class="tableW300 borderZero">
	<COL class="colW100Left">
	<COL class="colW200Right">
	<TR>
		<TD class="middleLeft">
			テスト表
		</TD>
		<TD class="middleRight">
			<TABLE class="tableW180 borderNormal" border="1">
				<COL class="colW60Left">
				<COL class="colW60Center">
				<COL class="colW60Right">
            			<TR class="height40">
					<TD class="middleLeft">○</TD>
					<TD class="middleCente">○</TD>
					<TD class="middleRight">○</TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
</TABLE>
</HTML>

変更箇所です。

①最初のTABLEタブの border="0" を削除して、borderZero を追加
②表のTABLEタグの cellspacing="0" を削除して、borderNormal を追加
③文字位置を指定するために、TDタグに middleLeft、middleCente、middleRight の設定を追加

TABLEタブの border="1" って定義は重要らしく、省略すると枠線が表示されなくなりました。なんでも、border="1" って指定することでレイアウト目的ではない本物の表と宣言することになるそうです。

■　結果

まず、IE8での表示結果です。

こちらは、特に変わりなしですね。

そして、IE11での表示結果です。

問題になっていた枠が細くなって、文字位置が正しく反映されましたので、これで大丈夫ですかね。と言っても、実際にはもっとスマートな方法があるとは思います。HTMLやCSSってどうにも苦手で自身が無いです。

■　結果

ここ最近、IE6互換ブラウザとか、サーバ上でIE6を動かしてクライアントには結果（画面イメージ）だけを表示するとか、そういった商品やサービスを見かけることが多くなってきました。どこでも困っていることは同じようですね。

もっとも手間がかかると（と思う）HTMLとCSSを修正したのは、IE11以降に本格的に対応するとした場合の実証実験でした。結果、CSSを上手く使えば大規模な修正をしなくても対応できそうな感じなのですが、問題なのは費用対効果ですね。

1画面の修正に10分として、400画面で4000分（66時間）。確認に要する時間もあるし、複雑な画面の場合は微調整にさらに時間が掛かることは必至です。

そして、今回対応しても数年後には同じような話が出てくる気がするし・・・

さて、どうしたものやら。

投稿記事の一覧：http://harikofu.web.fc2.com/

--- blog end ---