DIV태그에 text-align:center속성을 주고 TABLE태그를 둘 경우 IE에선 가운데 정렬이 되는데 FF(또는 dtd에 따른 IE8)에선 왜 안되냐 라고 물어 보는 분들이 있어 블러그에 올려 둡니다.
TABLE태그는 기본적으로 Block-level 엘리먼트로 정의 되어 있습니다.(http://htmlhelp.com/reference/html40/block.html)
따라서 이런 Block-Level 엘리먼트는 text-align:center로 중앙 정렬을 할 수 없습니다. 원칙적으로는 말이죠.
일단 이미지를 통해 내용을 확인하겠습니다.
<div style="border:1px solid red; text-align:center">
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
이렇게 간단히 코딩을 하고 위와 같은 이미지를 기대 하셨을 겁니다. 그런데 이게 브라우저 또는 dtd에 따라서 다른 모양을 나타 낼겁니다.
혹시 에디트플러스를 켜놓고 html에 위의 내용을 작성 하셨다면 dtd문제로 브라우저 마다 다른 화면을 보게 될겁니다.
그 이유는 에디트플러스에서 제공하는 기본적인 dtd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">는 dtd가 아닙니다. 순수하게 문법오류만을 잡아낼뿐 dtd에 대한 내용이 없습니다. 뿐만아니라 HTML 4.0입니다. 이미 HTML이 4.1로 바뀐마당에 서언문 자체도 문제가 있죠. 아무튼 이건 기본적인 dtd일뿐입니다.
따라서 만약 DIV안의 TABLE을 중앙 정렬을 시켜야 한다면 아래와 같이 하셔야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div style="border:1px solid red;">
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:0px; margin-right:auto">
<tr>
<td>왼쪽</td>
</tr>
</table>
<br />
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:auto; margin-right:auto">
<tr>
<td>중앙</td>
</tr>
</table>
<br />
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:auto; margin-right:0px">
<tr>
<td>오른쪽</td>
</tr>
</table>
<div>
</body>
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div style="border:1px solid red;">
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:0px; margin-right:auto">
<tr>
<td>왼쪽</td>
</tr>
</table>
<br />
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:auto; margin-right:auto">
<tr>
<td>중앙</td>
</tr>
</table>
<br />
<table width="200" border="1" cellspacing="0" cellpadding="0" style="margin-left:auto; margin-right:0px">
<tr>
<td>오른쪽</td>
</tr>
</table>
<div>
</body>
<html>
위와 같이 하는게 정상적인 방법인데, 만약 quirks모드로 화면을 구동 시킨다면 IE8이건 IE6이건 단순히 DIV에 text-align:center만 놓아도 됩니다.
사실 IE6이 문제라기 보단 IE가 가진 기본적인 quirks모드에 따라 화면이 달라 보이는 겁니다.
즉 위의 소스에서 보이는 DTD를 STRIC모드로 하였을 경우 TABLE에 style="margin-left:auto; margin-right:auto"(또는 margin:0px auto)속성을 줘야 합니다.
위의 속성으로 화면을 보게 되면 아래와 같이 나옵니다.
사실 이런 불편한 관계를 피하기 위해서는 기본적으로 DTD선언에 맞춰 화면을 개발 해야 하며, 기본적으로 엘리먼트의 속성을 파악 해줘야 합니다.
