웹표준 table구조 - 표 만들기 > 홈피와 블로그

본문 바로가기
  |     |     |     |   4  |  
오늘의 추천항해 | "오늘의 항해 가이드" 코너입니다.


읽|을|거|리

설문조사

키스세븐을 어떻게 알고 방문하셨나요?

방문자 통계

오늘
22
어제
67
최대
339
전체
126,601

 

코딩 | 웹표준 table구조 - 표 만들기

페이지 정보

작성일14-09-16 09:57 조회1,322회 댓글0건

본문

웹2.0시대를 시작할 때 즈음....

지나치게 표로 레이아웃을 잡는 것 때문에 깨짐, 속도저하 등을 이유로 표를 쓰지 말라는 충고들이 넘쳐 났습니다. 

그래서 Div구조로 홈페이지들이 변모를 하게 되는데... 

하지만 무조건 표 table 구조는 나쁜 것이고 Div만 정석은 아닙니다. 필요에 따라 적재적소에 이용하는 것이 가장 좋은 것이며, 다만 웹표준을 지킬 줄 아는 코딩만이 정석인 것입니다. 

 

 

 

 

 

 

1. 테이블의 큰 구조

 

웹에서 표를 만들기 위해서는 아래와 같은 기본구조를 가집니다.

<table​>

<caption>표에 대한 설명</caption>

<thead>

<tr>

<td>셀의 이름</td>

</tr>

</thead>

<tbody>

<tr>

<td>내용</td>

</tr>

</tbody>

</table​>

이렇게 처음과 끝을 <table​>​와 </table​>​로 정해주면 됩니다.

 

 

 

 

2. 테이블의 내부

 

 

이 구조는 3가지 요소를 가지는데 설명하자면 이렇습니다.

 

<caption>은 ​표에 대한 설명일 뿐이므로 화면에 표시되지는 않습니다. 그러나 여러가지 이유로 만들어 두는 것이 좋습니다.

<thead>는 각 열에 대한 머릿말입니다. 엑셀로 표를 만들 때 위쪽에 항목을 ​적어두는 것과 같습니다.

<tbody>는 실제적인 내용이 들어가는 부분입니다. 그런데 <tbody>​의 맨 처음 <td>는 행의 머릿말입니다. 엑셀에서 왼쪽에 만드는 항목과 같습니다. 그 외의 <td>는 진짜로 내용이 들어갈 부분입니다.

 

 

 

 

3. 행과 열 늘리기

 

위의 태그로 만든 표는 가로 1열, 세로 2행으로 되어 있습니다.​ 그럼 가로 2열, 세로 3행으로 늘려 보겠습니다. 간단합니다. 줄을 더 만들고 싶으면 <tr>을 더 늘리고, 칸을 더 만들고 싶으면 <td>를 더 늘리면 됩니다.

<table​>

<caption>표에 대한 설명</caption>

<thead>

<tr>

<td>셀의 이름</td>

<td>셀의 이름</td>

</tr>

</thead>

<tbody>

<tr>

<td>내용</td>

<td>내용</td>

</tr>

<tr>

<td>내용</td>

<td>내용</td>

</tr>

</tbody>

</table​> 

비교해 보면 tbody부분에서 <tr>~</tr>이 ​하나 더 늘어났습니다. 이렇게 해서 줄을 하나 추가한 것입니다.

 

또 비교해 보면 위헤서는 <tr>~</tr> 사이에 <td>내용</td>가 하나 밖에 없었는데, 이번엔 두개씩 있는 것이 보입니다. 이렇게 해서 칸을 하나씩 추가한 것입니다.

 

많이 헤깔리는 것이 <td>내용</td> 부분입니다.

중요한 것은 어떤 <tr>~</tr>​에 <td>내용</td>를 추가하든지, 그 개수만큼 동일하게 다른 <tr>~</tr>​에도 <td>내용</td>를 추가해 줘야 한다는 것입니다. 안 그러면 가로 세로 개수가 맞지 않아 표가 깨지게 됩니다.

 

 

 

 

 

4. 가로 세로가 일정하지 않은 표 만들기

 

표가 바둑판처럼 항상 가로와 세로의 개수가 맞아서 네모반듯하면 참 좋겠지만, 실제로 사용하면 그렇지 않습니다. 가로가 두개 이상의 칸으로 넓어져야 할 때도 있고 세로가 아주 길게 여러개의 칸을 하나로 병합되야할 때도 있습니다.

 

이럴 때 쓰는 것이 바로 colspan과 rowspan입니다.

 

가로로, 즉 옆으로 여러 칸을 병합할 때는 ​colspan을 사용합니다. 3개의 칸을 병합하고 싶다고 하면 colspan​=3이라고 써 줘야 합니다.

세로의 경우에는 ​rowspan를 씁니다. 방법은 똑 같습니다.

 

그럼 어떻게 하면 될까요? 아래의 예제를 봅시다.

 

<table​>

<caption>표에 대한 설명</caption>

<thead>

<tr>

<td colspan​="2">셀의 이름</td>

</tr>

</thead>

<tbody>

<tr>

<td>내용</td>

<td>내용</td>

</tr>

<tr>

<td rowspan​="2">내용</td>

</tr>

<tr>

<td>내용</td>

<td>내용</td>

</tr>

</tbody>

</table​> 

처음의 태그와 달리 이번엔 <thead>​에서 <td>를 하나 없앴습니다. 대신 olspan​="2"를 넣었습니다. 이렇게 해서 가로로 2칸이 병합하여 1칸이 된 것입니다. 이제는 상단의 항목이 하나로 되어 버렸습니다.

 

그리고 ​<td>살펴보면 어떤 것은 <td>가 하나밖에 없습니다.

그렇습니다. 세번째 <tr>, 즉 세번째 줄에서 칸이 하나만 있는 것입니다. 

그런데 rowspan​="2"​가 붙어 있습니다. 세로로 두개의 칸을 병합해서 하나로 쓰겠다는 것입니다. 이렇게 해서 두번째 줄과 세번째 줄의 칸 두개가 세로로 병합되었습니다.

 

 

 

 

표를 태그로 만들 때는 위처럼 전체적인 구조를 먼저 만든 다음에 추가하거나 변경해야 헤깔리지 않습니다. 머리 속에 전체적인 가로 칸과 세로 칸에 대한 개수가 계산되야 하기 때문입니다. 

 

만약 도저히 태그로 못 하겠다고 한다면, 웹에디터 프로그램을 구입하여 워드처럼 표를 그린 뒤에 태그를 복사해서 붙이는 방법도 있습니다.

간혹 외국 홈페이지를 보면 웹사이트 상에서 표를 바로 만들어주는 기능이 있는 홈페이지를 찾을 수가 있습니다. 물론 검색의 수고는 해야할지 모릅니다만....

 

 

 

[ ?...! ] 저작권법 공지 : 공유, 퍼가기 가능. 단, www.kiss7.kr 주소를 반드시 표시해야 합니다.
추천 0
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

게시물 검색

 


키스세븐 - www.kiss7.krCopyright © 키스세븐 | www.kiss7.kr. All rights reserved.
키스세븐 - www.kiss7.kr  상단으로
키스세븐 - www.kiss7.kr

사이트소개 개인정보취급방침 이용자 등록 이용약관 제휴/광고 문의 이용 안내 공지사항

키스세븐은 개인정보 보호정책 및 저작권 보호정책을 준수합니다.
키스세븐은 정보공유와 소통을 목적을 하는 커뮤니티 사이트입니다.

모바일 버전으로 보기