Mozilla 한국 커뮤니티

<table border="0" width="100%">
<tr>
<td>left</td>
<td align="right">right</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
</table>

[/code]

mike wrote:

Code: Select all

<table border="0" width="100%">
<tr>
<td>left</td>
<td align="right">right</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
</table>

table에서 div+css로 전환하는 방법은

1. table을 지운다.
2. tr/td를 없애고, tr 단위 또는 td 단위로 div로 묶는다.

tr단위는 하나의 행 단위이고 td는 열 단위인 데, 여기서 그 각각이 해당 페이지에서 어떤 의미를 갖는 구조인가를 생각해야 합니다.

아래 내용을 찬찬히 그리고 꼽씹어 읽어보세요.

테이블 해킹에서 웹표준으로

질문하신 형태가 가장 초보적인 float와 clear를 써서 해결할 수 있는 CSS 레이아웃 문제입니다. 질문에서 left의 폭을 지정하지 않았으므로 약간 모호한 부분이 있긴 하지만, 어쨌든 아래와 같이 하면 간단하게 구현이 됩니다.

Code: Select all

<style type="text/css">
	* {color:black}
	#left {float:left; background-color: #ff9;}
	#right {text-align:right; background-color:#9f9;}
	#tail {clear: both; background-color:#99f;}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="tail">text</div>
</body>

TABLE 을 CSS 로 표현 하시려고 하는 이유도 알려주시겠습니까?

HTML 은 단순히 어떠한 태그로 표현 하느냐가 중요한게 아니라 무엇을 표현하는가가 중요합니다. 무엇을 표현하느냐에 따라서 태그가 바뀔 수 있고 그것에 따라서 CSS 로 바뀌게 됩니다.

테이블에서 CSS레이어로 넘어가실때 주의하실 부분중 하나가 테이블을 CSS레이어로
구성하려 하는 것에 있습니다.
테이블은 칸을 그물처럼 짜서 칸칸에 내용을 집어넣는 방식이지만 CSS레이어는
빈 공간에 내용을 얻어놓는 방식입니다.
처음 CSS레이어를 도입하는 과정에서 아마도 많은 분들이 CSS레이어를 테이블처럼
칸칸을 그물처럼 짜서 넣으려 하시게 될 겁니다.
테이블과는 개념이 틀리기 때문에 다른 방향으로 접근이 필요합니다.

Code: Select all

테이블
<table>
  <tr>
    <td>가나다</td>
    <td>마바사</td>
  <tr>
</table>

CSS레이어
<div>가나다</div>
<div>마바사</div>

위의 코드를 보시면 테이블은 두개의 td가 묶여있고 서로 영향을 줍니다.
하지만 CSS레이어는 서로가 각각의 묶음이며 경우에 따라 서로 영향을 줄 수도
독립적으로 돌아갈 수도 있으며 CSS를 어떻게 작성하느냐에 따라 위치도 자유자재로
배치할 수 있습니다.

position, float, clear => 이 3가지의 CSS속성을 집중적으로 공부해 보시면
CSS레이어 구성에 많은 도움이 되실 것입니다.

Mozilla 한국 커뮤니티

이런 테이블은, css로 어떻게 표현하나요

이런 테이블은, css로 어떻게 표현하나요

Re: 이런 테이블은, css로 어떻게 표현하

이렇게 해보세요

주의점