질문/조언질답게시판
Extra Form
PHP PHP 7.0
CMS Rhymix

td분할.PNG.jpg

 

table을 이용해서 이미지들을 넣었는데요.

1라인의 td는 2개 , 1라인의 td는 3개입니다.

1라인은 width를 50%씩 , 2라인은 width를 33%로 주고 싶은데요.

 

td width를 위의 td에 영향을 받지 않고 각각 사이즈를 다르게 주려면 어떻게 해야할까요?

  • profile

    윗줄의 td들은 각각 colspan=2를 주고, 아랫줄 가운데 td만 colspan=2를 주면 중앙을 가로지르는 세로선으로부터 다소 자유로워질 수는 있겠지만... (아래의 표 참고) 이런 건 아무래도 테이블로 구현하기보다는 div로 구현하는 편이 훨씬 깔끔합니다. 정 안되면 두 개의 테이블로 분리하는 방법도 있고요.

     

    50% 50%
    33% 33% 33%
  • profile ?
    아 colspan을 더 활용을 하란 말씀이시네요...

    그런데 DIV를 활용하시라는건 줄마다 <div>content</div><div>content</div> 를 사용하는게 낫다는 말씀이실까요??
  • ? profile
    네, 테이블에서 colspan을 아무리 활용하더라도 너비를 자유자재로 변경하는 데는 한계가 있으니까요. 위에 그려드린 예제에서도 td들을 가로지르는 가상의 세로선이 있고, 그 틀을 벗어날 수 없습니다. 예를 들어 3번째 줄에 25%짜리 td를 4개 배치하려고 하면 최소 6개의 컬럼을 만들어서 colspan을 조정해야 할 거예요. ㅎㅎ

    div는 그냥 몇%라고 지정하면 그대로 적용되니까 편리하지요.
  • profile
    최소공배수를 이용하는 거죠.
    2칸과 3칸의 최소공배수는 6이니 총 6칸이 있는데..
    위줄은 3칸을 1칸으로 합쳐서 colspan=3으로 2칸을 만들고
    아래줄은 2칸을 1칸으로 합쳐서 colspan=2로 3칸을 만들면 되죠.
  • ?

    저런 경우 div 구조가 더 합리적입니다.
    도표가 아니면 가급적 table을 사용안하는게 좋습니다.

    div가 아니라 li를 사용해야 겠네요.

  • ? profile

    리스트가 아니라면 li도 아니죠 ㅎㅎ
    태그 구조는 원하는 기능을 구현하는 데 필요한 최소한으로만 쓰는 것이 좋다고 생각하는 1인입니다.
    사실 이런 경우는 그냥 img에 직접 CSS 적용해 버려도 상관없어요.

  • profile ?

    이런 대화가 좋습니다 ㅋㅋ

    전 저걸 리스트로 봅니다.
    동일한 패턴으로 반복되는 형식들은 table이 아니면 ul.ol,dl 등으로 감싸서 동일한 패턴이 반복되고 있음을 뚜렷하게 해야 한다고 생각합니다.

  • ?

    예제로 주신 페이지에서는 구조적으로 '목록'이 맞는 것 같습니다.
    기계 입장에서
    "이것은 '사진 표'인가? '사진 목록'인가?" 라고 한번 생각해보시는게...
    HTML 코딩은 이런 생각부터 시작하시는게 편하십니다.

    만약, IE 10 이하의 사용자를 포기하신다면,
    저 레이아웃은 저라면
    UL>li + Flex 디스플레이를 사용할 것 같습니다.

  • ? ?
    이렇게 html을 문서로서 접근하는 대화들이 재미있습니다.
    입문할때는 많이 고민하고 접근했었는데
    이젠 관성적으로 작업하고 있는 자신의 문제점도 어느정도 인지하고 있으면서도
    새로운걸 배우기 귀찮아하는 게으름으로 인해
    이런 대화에서라도 얻어가야 할건 얻어가야 해서