jugug.net ...NAKED

대략.. 이런 표를 만들었다고 합시다.

<table id="itemTable">
    <tr class="itemHead">
        <th class="thumbNail">사진</th>
        <th class="itemName">메뉴 이름</th>
        <th class="itemNum">1kg당 개수(마리)</th>
        <th class="itemPrice">가격</th>
    </tr>
    <tr class="item1">
        <td class="thumbNail">img1</td>
        <td class="itemName">전복 소</td>
        <td class="itemNum">1kg당 20~30마리</td>
        <td class="itemPrice">39,000</td>
    </tr>
    <tr class="item2">
        <td class="thumbNail">img2</td>
        <td class="itemName">전복 중</td>
        <td class="itemNum">1kg당 15~19마리</td>
        <td class="itemPrice">45,000</td>
    </tr>
    <tr class="item3">
        <td class="thumbNail">img3</td>
        <td class="itemName">전복 대</td>
        <td class="itemNum">1kg당 10~14마리</td>
        <td class="itemPrice">55,000</td>
    </tr>
    <tr class="item4">
        <td class="thumbNail">img4</td>
        <td class="itemName">전복 특대</td>
        <td class="itemNum">1kg당 7~9마리</td>
        <td class="itemPrice">69,000</td>
    </tr>
    <tr class="item5">
        <td class="thumbNail">img5</td>
        <td class="itemName">전복 종합</td>
        <td class="itemNum">다양한 크기</td>
        <td class="itemPrice">50,000</td>
    </tr>
    <tr class="item6">
        <td class="thumbNail">img6</td>
        <td class="itemName">전복죽</td>
        <td class="itemNum">&nbsp;</td>
        <td class="itemPrice">일반 : 8,000<br />후식 : 4,000</td>
    </tr>
</table>

그러면 아래와 같은 표가 나옵니다.

이것의 모양새를 한번 바꿔 본다고 미친짓을 한번 해봅시다. 모양새를 바꾸기 위하여 아래와 같이 스타일시트를 지정합니다.

    table{
        display:block;
        border:0;
        padding:0;
        margin:0;
    }

    td, th{
        display:block;
    }

    tr{
        display:block;
        position:absolute;
        width:190px;
        height:210px;
    }

    .itemHead{
        display:none;
    }

    .item1{
        top:0;
        left:0;
        background-color:#aaf;
    }
    .item2{
        top:0;
        left:230px;
        background-color:#afa;
    }
    .item3{
        top:0;
        left:460px;
        background-color:#faa;
    }
    .item4{
        top:265px;
        left:0;
        background-color:#339;
    }
    .item5{
        top:265px;
        left:230px;
        background-color:#393;
    }
    .item6{
        top:265px;
        left:460px;
        background-color:#933;
    }

이렇게 하면 일반 웹브라우저(?)에서는 아래처럼 제가 의도한데로 렌더링이 됩니다.

그런데 IE는 IE특유의 table해석 철학때문에 지 맘대로 해석을 해버리십니다.

애초에 원래 구조화된 table의 속성을 무시하고 모양새를 바꾸려던 제가 이상한놈일까요, 아니면 IE가 이상한것 일까요? 6,7에서 짝짜쿵 하시니 제가 뭐라 말을 못하겠군요. (8도 제대로 나오지 않기는 마찬가지입니다....)

td에 position:absolute; width:190px;를 주면 비슷하게 보이긴 하지만 또다시 td에 너비와 높이를 주고, 위치를 설정하면 객체들이 마음대로 춤을 춥니다..

그래서 이건 어쩔 수 없이 table은 포기를 하고 다른걸 써야 겠군요.