table

Blogger.com의 예쁜 테이블 따라하기

따라해봅시다

table

예전예전에 CSS에 대해 아무것도 모를적에 GoogleBlogger.com을 인수 했다는 소식을 듣고, 구경을 갔다가 가입을 했더랬습니다.
시원시원하면서도 아기자기한 디자인이나 깔끔한 코딩이 정말 마음에 들어서 “Blogger.com에다가 둥지를 틀까~?”라고 잠시 고민도 했었지만, 역시나 내가 모든걸 관리할 수 있는 것이 아니라면 가지고 싶지 않아서, 가입만 하고 구경만 하다가 돌아왔더랬죠.

헌데 오늘 갑자기 그곳에서 맘에 들었었던 테이블 생각이 나서, 오늘 한번 따라서 해보기로 했습니다. 테이블에 멋지게 Gradation이 들어간 녀석입니다. (Form을 지닌 table 곳곳에 쓰였습니다. )
별거 없습니다. ^^

위의 그림을 봤을때, 기존에 흔히 쓰던 table과의 다른 점은 gradation이 들어간 것 뿐이죠?

기본 설명

3개의 column6개의 row를 가진 평범한 table입니다.
표의 제목(항목)부분은 th로 써주는 것, 잊지 않았겠죠?
한줄의 row code만 적어 볼게요.

css도 간단합니다.
다음의 jpg파일을 table의 bg로 넣어주고, th에서만 보이지 않게 해놨네요.

bg_table.jpg

부가설명

  • table의 형태를 띄긴 했지만, 엄연히 form으로 구성되어 있기 때문에 각 주제항목에 label을 달아주었구요, 사용자가 알아보기 편하게 하기 위해서 label에는 cursor:pointer;로 해주었습니다.
  • 각 input box에는 이동해야할 순서대로 tapindex를 설정해 주었습니다.

정말 간단한 방법이지만, 선과 색상면만 있는 table과는 또 다르지요?

최종파일 보기
Blogger.com – original page

Gradation을 넣은 것 외에는 많은 분들이 다 할 수 있는 것들 입니다.

사실 data table로 보기엔 caption이나 summary의 부재로 올바르다고 할 수는 없지만, 간단한 것으로 모양을 예쁘게 잘 꾸민 것 같아서 따라하는 시간을 가져봤습니다.
다음번엔 data table로 올바른 예제를 다뤄 볼게요.

  • fieldset과 label을 이용한 폼으로 바꿔주세요. 🙂

  • 아, 이거는 그냥 테이블 모양만 본거예용 ^^;
    담번에는 어우야님이 css design korea에 올리신 fieldset따라하기도 할거예여 ㅎㅎ

  • 맘에든당!

  • 테이블 치고 이쁘게 사용할 수 있겠죠?
    나중에 어딘가에 응용해야지 -_)+

  • 단순하면서도 이쁘네 + _+