Mozilla 한국 커뮤니티

<?xml version="1.0" encoding="euc-kr"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  <head>
    <meta http-equiv='content-type' content='text/html; charset=euc-kr' />
    <title> </title>
    <style>
    <!--
    body {
        font-size : 10pt;
        text-align : center;
        font-weight : bold;
        color : green;
    }
    -->
    </style>
  </head>
  <body>
    <div >
        스타일 적용됨
    </div>

    <table>
        <tr>
            <td>00 </td> <td>01</td>
        </tr>
        <tr>
            <td>10 </td> <td>11</td>
        </tr>
        <tr>
            <td>20 </td> <td>21</td>
        </tr>
    </table>
    
  </body>
</html>

위처럼 만들고 파이어폭스에서 보면 테이블이 가운데에 오지 않고 왼쪽에 붙습니다.
IE 에서 보면 테이블이 가운데에 오기는 하는데 폰트 크기와 볼드 적용이
되지 않습니다. 신기한 건 색깔은 적용된다는 것입니다.
테이블에 css 를 쓸 때는 특별히 뭔가를 더 해줘야 하는 것인가요???

따로 처리해야 하는게 있는지 모르겠습니다만 IE의 버그처럼 보입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
방식으로 하면 아무런 문제가 없군요.

text-align 속성은 text 에 관련된 속성이기 때문에 table 을 중앙 정렬 하지 않습니다.

margin: 0 auto;

를 사용하면 중앙정렬을 할 수 있습니다.

그리고 IE 호환모드에서는 td 가 body 의 font 속성이 일부 적용되지 않습니다. 표준 모드에서는 적용이 되지만,

<?xml version="1.0" encoding="euc-kr"?>

때문에 표준 모드로 작동하지 않습니다.

text-align의 설명은 아래와 같습니다.

This property describes how inline content of a block is aligned
이 속성은 블록의 인라인 내용물의 정렬방식을 기술하는 것입니다.

http://www.w3.org/TR/REC-CSS2/text.html

어떤 블록를 정렬하는 게 아니라, 블록 내 요소의 정렬이라는 것이죠.

박스모델에서 inline과 block이라는 게 있습니다. inline은 말그대로 행 안이고 블록은 구역입니다.

이를 쉽게 알 수 있는 방법은 div에 배경색을 지정해보면 쉽게 확인할 수 있습니다. 창(windows)에서 width값을 주지않은 상태에서, 블록요소는 한 행을 모두 차지하지만 inline요소는 텍스트가 차지하는 범위에서만 배경색이 나타납니다.

inline요소로는 br, img 태그가 되며 block요소로는 table, p, div, h1~h6 등이 있죠.

위에 제시된 설명에서 table은 block요소이기 때문에 내부에 있는 텍스트만 정렬한 것은 당연합니다. 만일 스타일에서 table을 inline 속성으로 변경하면 중앙정렬이 될 것입니다. 그러나 원하는 결과는 아닐 것입니다.

table을 중앙정렬하고 싶다면 아래와 같이 하시면 됩니다.

Code: Select all

 table {margin:0 auto;}

Mozilla 한국 커뮤니티

table 에 css 적용 의문점

table 에 css 적용 의문점