'TABLE'에 해당되는 글 1건

  1. 2015.11.01 [HTML] <table> 사용하기

[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



: