[HTML] <table> 사용하기
개발공부/HTML 2015. 11. 1. 20:08안녕하세요 콤트입니다.
스프링으로 포스팅을 하다가 스프링 시큐리티에서 막혀서 낑낑대다가...ㅠ 잠깐 쉬었어요ㅠㅠ
뭐 나름대로 이것저것 하기는 했는데... 다 변명이죠 뭐ㅠ 그냥 게을러졌습니다ㅠ
그래서 이번에는 기분전환겸 HTML을 해볼까합니다.
처음엔 'table' 에대해서 해볼까합니다.
1. 특징
어떤 데이터를 줄과 칸을 딱딱 맞춰서 아주 깔끔하고 보기좋게 보여주는데 사용하기 편한 테그입니다.
'table' 로 작업하면 굳이 줄맞추려고 CSS를 작성하지 않아도 틀 안에서 자기들끼리 정리되어서 보여집니다.
그래서 'table' 을 이용하여 화면 레이아웃을 작성하시는 분들을 여럿 봤습니다.
'table > tr > td > table >tr ...' 이런방식으로 화면의 레이아웃을 작성하시는 분들이 있습니다. 물론 이렇게 작성이필요한 경우도 있을겁니다. 하지만 이건 용도에 맞지않게 사용된 예라고 생각됩니다. 물론 지극히 개인적인 생각이에요.
2. 장점 및 단점
2-1. 장점
'table' 은 데이터를 표현하는데 아주 잘맞는 테그라고 생각합니다. 데이터를 받아서 화면에서 깔끔하게 뿌려줄수있기때문이죠. 크게 손대지않아도 어느정도는 정렬이 되어있습니다. 여기서 CSS를 좀 이용해서 더 보기 편하게 혹은, 사용하기 편하게 조정할 수 있습니다.
2-1. 단점
시간이 오래걸립니다. 'table' 은 화면에 표현되는시간이 상당히 오래걸리는것으로 알고있습니다. 특별한 액션이 있는 테그를 제외하면 탑3안에 들것으로 예상됩니다. 그래서 'table' 로 레이아웃이 잡혀있는 페이지는 접속하는데 시간이 더 오래 걸립니다. 제가 'table' 이 오래걸린다고 알고있어서 그렇게 체감되는것일지도 모르지만.. 적어도 저는 그래요.
3. 샘플
맨 아래 테이블과 관련하여 간단한 샘플파일을 하나 업로드해놓도록 하겠습니다.
너무 간단한것이라 다들 아실거같지만.. 그래도 혹여나 모르는것이 있을지도 모르는 분들을 위하여 업로드합니다.
잘 사용하지 않는것들도 간혹 보이실수도 있는데 알아두시면 유용해요.
소스
index.html