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

따라해봅시다


table

예전예전에 CSS에 대해 아무것도 모를적에 GoogleBlogger.com을 인수 했다는 소식을 듣고, 구경을 갔다가 가입을 했더랬습니다.
시원시원하면서도 아기자기한 디자인이나 깔끔한 코딩이 정말 마음에 들어서 “Blogger.com에다가 둥지를 틀까~?”라고 잠시 고민도 했었지만, 역시나 내가 모든걸 관리할 수 있는 것이 아니라면 가지고 싶지 않아서, 가입만 하고 구경만 하다가 돌아왔더랬죠.
헌데 오늘 갑자기 그곳에서 맘에 들었었던 테이블 생각이 나서, 오늘 한번 따라서 해보기로 했습니다. 테이블에 멋지게 Gradation이 들어간 녀석입니다. (Form을 지닌 table 곳곳에 쓰였습니다. )
별거 없습니다. ^^
위의 그림을 봤을때, 기존에 흔히 쓰던 table과의 다른 점은 gradation이 들어간 것 뿐이죠?

기본 설명

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

<table>
     <tbody>
          <tr>
               <th>Choose a user name (항목 #1)</th>
               <td>인풋박스#1</td>
               <td>You'll use this to sign in for future visits.(설명 #1)</td>
          </tr>
     </tbody>
</table>

CSS도 간단합니다.
다음의 이미지 파일을 table의 배경으로 넣어주고, th에서는 배경이 보이지 않도록 설정합니다.

bg_table.png
table {
    background:#fff url("bg_table.png") repeat-x left top;
}
th {
    background:#fff;
    /* 배경색상을 설정해서 배경으로 넣은
    gradation파일이 보이지 않도록 했어요 */
}

부가설명

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

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

최종 파일

See the Pen Beautiful Table from blogger.com by kukie (@kukie) on CodePen.

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