본문 바로가기
프론트앤드 개발

브라우저랜더링과 테이블구조

by 긴자손 2010. 2. 25.
728x90
반응형

테이블을 만들때... 각 브라우저는 렌더링을 다르게 한다...


일반적으로 우리는 테이블의 사이즈를 정하고 th,td의 사이즈를 계산하여 만들것이다...


전체를 1000px로 한다면 


<style ="text/css">

.areaBottom {width:1000px;margin-left:1px;}

.areaBottom thead {border:1px solid #F0F0F0;background-color:#FAFAFA;}

.areaBottom th {height:28px;text-align:center;border-bottom:1px solid #F0F0F0;border-right:1px solid #F0F0F0;}

.areaBottom th.lineT {border-top:1px solid #F0F0F0;}

.areaBottom th.lineL {border-left:1px solid #F0F0F0;}

.areaBottom td {height:28px;border-bottom:1px solid #ECECEC;border-left:1px solid #ECECEC;text-align:cener;font-size:12px;padding:5px 0;line-height:21px;}

.areaBottom a{color:blue;}

.areaBottom .c1 {width:30px;text-align:center;border-right:1px solid #ECECEC;}

.areaBottom .c2 {width:100px;text-align:center;border-right:1px solid #ECECEC;}

.areaBottom .c3 {width:150px;text-align:center;border-right:1px solid #ECECEC;}

.areaBottom .c4 {width:194px;text-align:center;border-right:1px solid #ECECEC;}

.areaBottom .c5 {width:256px;text-align:center;border-right:1px solid #ECECEC;}

</style>


머 이렇게 선언하여서 스타일을 시작할 것이다.

위의 클래스를 테이블에 선언 하여 각각의 사이즈를 잡을것이다.


<table class="areaBottom"> 으로 선언하여 테이블을 시작하면 그밑에 각 서브 항목들은 


위의 th값과 thead값등의 스타일을 먹게 된다..


여기서 중요한 것은 c1~c5까지의 클래스는 사이즈가 있다. 그리고 보더도 들어가있다...


<tr>

<td class="c1"></td>

<td class="c3"></td>

<td class="c4"></td>

<td class="c2"></td>

</tr>

이렇게 선언하여 테이블을 구성할 경우에 실제 테이블은 1000이라는 전체범위를 가지고 있다.


실제 안에 면적에 해당하는 c1~c4를 더해보면 474밖에 되지 않는다. 


하지만 브라우저가 테이블 전체 크기를 계산하여서 범위 값을 다시 할당을 해준다...


여기가 바로 포인트가 되는 부분이다. 범위값을 다시 할당을 해주는 데 다른 브라우저는 실면적도 크게한다...


하지만.. IE는 눈으로 보기엔 커졌지만 우리가 선언해준값을 그대로 기억하여 범위를 할당한다...


결국 크게는 보이지만 커진게 아니란얘기가 된다.. 그래서 자기가 원했던 테이블 모양이 아니라 다른모양이


나오게 된다는 것이다... 그래서 꼭 전체 크기와 나머지 테이블의 크기를 맞춰주는 것이 좋다.. IE경우는


패딩값과 마진값을 계산을 다른 브라우저와 다르게 한다. 그래서 그것마저도 다 계산을 해주어야 틀어지는


일이 없을 것이다....


728x90
반응형

'프론트앤드 개발' 카테고리의 다른 글

자바스크립트 총정리~!  (0) 2010.04.07
java script favorite  (0) 2010.03.08
CSS 선택자 우선순위  (0) 2010.02.25
프리마커문법  (0) 2010.02.25
CSS hack모음  (0) 2010.02.25