이런모양의 테이블을 만드는게 가능할까요? > 그누4 질문답변

12.08.05 15:12:05

gilynh 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.05 15:21:45

12.08.06 00:03:18

답변 감사 드립니다.
왜 굳이 td 안에 테이블을 다시 만들어야 될까요?
그냥 하면 안될까요?;;;
정말 그 이유가 궁금해요.
<tr><td>의 속성을 알고 싶어요.

전진 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.06 08:13:35

rowspan을 잘 쓰면 한 테이블로 가능합니다.
(웹프로그램에도 답을 올렸는데.. 여기도 ..^^)
<table border="1" width="100" height="100">
<tr>
<td rowspan="2"></td>
<td rowspan="3"></td>
<td ></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

12.08.06 11:11:26

답변 감사드립니다.
작성하신 코드로 해보았는데, 잘 안되는것 같아요.
확인 한번 부탁드립니다.
문제해결보다 table의 속성이 궁금해서요~
더운날씨 건강 조심하세요.

전진 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.06 21:45:56

글쎄요.. 일단 크롬에서는 위 그대로 잘 나오고요..
IE9 (quirks 모드)에서 봤더니 셀의 border가 안보이네요.
하지만 내용은 잘 나눠져 있습니다.
아래 바탕색으로 넣어 봤습니다.
<table>
<TBODY>
<TR>
<TD style="BACKGROUND-COLOR: blue" rowSpan=2></TD>
<TD style="BACKGROUND-COLOR: red" rowSpan=3></TD>
<TD style="BACKGROUND-COLOR: yellow"></TD></TR>
<TR>
<TD style="BACKGROUND-COLOR: violet" rowSpan=2></TD></TR>
<TR>
<TD style="BACKGROUND-COLOR: green"></TD></TR></TBODY>
</table>

IE7에서는 standards, quirks 모드 둘다 잘 되고,
IE8과 IE9에서는 quirks 모드에서만 잘 됩니다.

제가 아는한, 위 테이블의 rowspan 사용법은, 표준에서 어긋나지 않은 것이므로,
이를 제대로 그려내지 못하는 IE8+ standards 모드가 문제네요.. -_-;;

# # #

궁금하신 table 속성이 무엇인지요?
위처럼 셀을 나누고 합치는 것은 table 속성과는 상관이 없는 부분인지라..

12.08.07 09:42:27

전진님 답변 감사드립니다.
말씀하신 내용중에 "rowspan 사용법은, 표준에서 어긋나지 않은 것" 처럼
rowspan이 가지고 있는 표준에 대한 그 어떤 본질적인 속성이 궁금합니다.
단지 "td를 수직으로 합치는 것" 정도만 이해하고 있어서요.
좀 더 깊게 이해하고 싶어서 글을 남기게 되었어요.~

전진 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.07 13:25:51

아, 그러셨군요. ^^

제가 알고 있는 바로는,
rowspan 값이 주어지면 (default=1) 그 셀이 포함되어 있는 row 부터 아래로 rowspan 만큼 셀을 합치게 (spanning) 됩니다.
마찬가지로 colspan은, 그 셀이 포함되어 있는 column 부터 오른쪽으로 colspan 만큼 셀을 합치게 되고요.

이렇게 rowspan과 colspan을 사용할때는, 원래 table의 M x N 갯수의 셀들 (M: column 수, N: row 수) 이 다 필요없게 되겠죠. (이미 시도하셨던 table에서도 시도하셨듯이.. ^^)

만일 바로위 row의 셀이 rowspan을 2 이상 사용하게 되면,
현재 row의 td (또는 th)는 뛰어 넘게 되고요.. 즉, 그 다음 column으로 밀리는 것이죠.
즉, rowspan과 colspan의 적용 순서는,
왼쪽 상단부터 가로방향으로 진행됩니다.
마치 크기가 각각인 블럭들 (예를 들어, td rowspan=2 은 세로로 두배가 긴 블럭, td colspan=3 는 가로로 세배가 긴 블럭 등) 을
왼쪽 상단부터 해당 줄(row)에서 비어있는 칸부터 (rowspan으로 주욱 내려온 블럭은 뛰어넘고) 블럭을 놓는 것과 같이요.

(아, 혹시 이런 것을 궁금해 하시는 것이 아닐 수도 있겠네요.. ^^;)

한가지 재밌는 것은,
만일 이렇게 rowspan과 colspan을 사용할때 셀수가 안맞으면 어떻게 될까요?

1996년 table 관련 표준을 제안하는 문서에서 사용되었던 예제입니다. (출처: http://tools.ietf.org/html/rfc1942 )
<table border>
<tr><td rowspan=2>1<td>2<td>3
<tr><td rowspan=2>4
<tr><td colspan=2>5<td>6
</table>

어떤 결과가 나올까요? ^^;
(아, 그리고 보시면 tr 과 td 닫는 태그는, 옵션이라는 것을 아실 수 있습니다. ^^)

또다른 예..
<table border width="100" height="100">
<tr><td colspan=2>1
<tr><td rowspan=2>2<td colspan=2>3
<tr><td rowspan=2>4<td colspan=2>5
</table>

아, 그러셨군요. ^^

제가 알고 있는 바로는, 
rowspan 값이 주어지면 (default=1) 그 셀이 포함되어 있는 row 부터 아래로 rowspan 만큼 셀을 합치게 (spanning) 됩니다.
마찬가지로 colspan은, 그 셀이 포함되어 있는 column 부터 오른쪽으로 colspan 만큼 셀을 합치게 되고요.

이렇게 rowspan과 colspan을 사용할때는, 원래 table의 M x N 갯수의 셀들 (M: column 수, N: row 수) 이 다 필요없게 되겠죠. (이미 시도하셨던 table에서도 시도하셨듯이.. ^^)

만일 바로위 row의 셀이 rowspan을 2 이상 사용하게 되면,
현재 row의 td (또는 th)는 뛰어 넘게 되고요.. 즉, 그 다음 column으로 밀리는 것이죠.
즉, rowspan과 colspan의 적용 순서는,
왼쪽 상단부터 가로방향으로 진행됩니다.
마치 크기가 각각인 블럭들 (예를 들어, td rowspan=2  은 세로로 두배가 긴 블럭, td colspan=3 는 가로로 세배가 긴 블럭 등) 을 
왼쪽 상단부터 해당 줄(row)에서 비어있는 칸부터 (rowspan으로 주욱 내려온 블럭은 뛰어넘고) 블럭을 놓는 것과 같이요.

(아, 혹시 이런 것을 궁금해 하시는 것이 아닐 수도 있겠네요.. ^^;)

한가지 재밌는 것은,
만일 이렇게 rowspan과 colspan을 사용할때 셀수가 안맞으면 어떻게 될까요?

1996년 table 관련 표준을 제안하는 문서에서 사용되었던 예제입니다.  (출처: http://tools.ietf.org/html/rfc1942 )
<table border>
       <tr><td rowspan=2>1<td>2<td>3
       <tr><td rowspan=2>4
       <tr><td colspan=2>5<td>6
</table>

어떤 결과가 나올까요? ^^;
(아, 그리고 보시면 tr 과 td 닫는 태그는, 옵션이라는 것을 아실 수 있습니다. ^^)

또다른 예..
<table border width="100" height="100">
       <tr><td colspan=2>1
       <tr><td rowspan=2>2<td colspan=2>3
       <tr><td rowspan=2>4<td colspan=2>5
</table>

전진 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.07 13:47:49

아, 한가지만 더..

위에서 시도하셨던 방법에 대해서는,
td에 height를 줄 수는 있습니다. 하지만, rowspan을 사용하지 않으면 같은 row에 있는 td들은 (아마도) 주어진 height 들 중 가장 큰 값으로 높이가 결정됩니다.
그래서, 원하시는 모양의 테이블을 만들기 위해서는, 3 x 2 테이블이 아닌 3 x 3 테이블을 만드셔서 rowspan으로 적절하게 합쳐주셔야 하는 것입니다.

12.08.07 16:36:03

전진님의 힌트를 바탕으로 정리해 보았습니다.
rowspan 이나 colspan은 쉘만을 하나의 독립적인 단위 개체로 계산을 하기 때문에,
3x2 테이블을 만들고 치수로 구역을 나누는 것은 서로의 기준이 부딪히게 되어(기준이 2개가 됨)
쉘은 쉘대로 모양을 못만들고, 치수는 치수대로 모양을 못만들게 되어서, 이것도 저것도 안되어
멘탈붕괴로 테이블이 이상해져버렸다? 라고 이해 하였습니다.ㅡㅡ;
"치수는 치수고 쉘은 쉘이다~"라는 깨달음을 얻었어요.;
제가 잘 이해한게 맞나요??

전진 홈페이지 자기소개 아이디로 검색 회원게시물

12.08.07 18:10:47

멘붕 ^^ 재밌는 표현이네요. ^^
적절히 이해하신 것 같습니다.

한가지 기억해두실 부분은, 위 두번째 댓글에서 말씀드렸듯이,
width나 height는, 그 셀이 속한 전체 column이나 row의 전체 폭과 높이를 조정하게 됩니다.
특정 셀이 속한 row나 column과 다른 width나 height를 가지게 하려면,
row나 column을 하나 더 만들고 span해야 한다는 것이죠. ^^

도움이 되었을지 모르겠네요. ^^;