2011. 3. 23. 17:27ㆍIT/Tistory Tips
글을 작성하다 보면 간단한 표를 만들어야 할 때가 있다. 간단하게 div 태그를 사용해서 글 상자를 만들고 내용을 주욱 나열하듯 입력해도 되지만, 그것보다는 세부 셀이 나뉜 표를 만드는 편이 한눈에 알아보기 쉽다. table 태그를 사용하면 간단한 표는 어렵지 않게 만들 수 있다.
table 태그의 기본 구조는 아래와 같다.
<caption>표 제목</caption>
<thead>
</thead>
<tbody>
<tr>
<td>첫째 줄 첫째 칸</td>
<td>첫째 줄 둘째 칸</td>
</tr>
<tr>
<td>둘째 줄 첫째 칸</td>
<td>둘째 줄 둘째 칸</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table>은 표를 만드는 것이다. <table>과 </table> 사이의 내용이 표를 구성하는 내용이다. caption, thead, tbody, tfoot은 간단히 이야기하면 표 제목, 머리글, 본문, 꼬리글이다. 그러나 보통의 표에선 caption, thead, tbody, tfoot을 생략하고 단순히 tr, th, td 요소만 사용할 수도 있다.
tbody 아래의 tr은 Table Row, 즉, 행(가로줄)이고 td는 Table Data, 즉, 행 내에 나열된 정보다. 쉽게 tr은 가로줄 td는 세로줄이라고 생각해도 좋다. tr 아래에 td가 세 개 있으면 한 줄에 세 칸으로 나뉜 표가 만들어진다.
table 태그에는 여러 가지 속성을 사용할 수 있다. 각 항목에 대해 살펴보자.
| <table> | 표를 만든다. | |
| width="가로 크기" height="세로 크기" | 표 전체의 가로와 세로 길이를 지정한다. 픽셀값(100px)과 백분율(80%)을 사용할 수 있다. | |
| border="테두리 선두께" | 표 테두리 선두께를 픽셀값(1px)으로 지정한다. | |
| bordercolor="#RRGGBB" "색 이름" | 표 테두리 선 색을 지정한다. | |
| bordercolorlight="#RRGGBB" "색 이름" | 표 테두리 선 색 중 밝은 부분 색(왼쪽, 위)을 지정한다. | |
| bordercolordark="#RRGGBB" "색 이름" | 표 테두리 선 색 중 어두운 부분 색(오른쪽, 아래)을 지정한다. | |
| bgcolor="#RRGGBB" "색 이름" | 테이블 전체의 배경 색을 지정한다. | |
| background="그림 경로" | 표 배경 그림을 지정한다. | |
| align="left" "center" "right" | 표 수평 정렬 상태를 지정한다. | |
| valign="top" "middle" "bottom" "baseline" | 표 수직 정렬 상태를 지정한다. | |
| cellpadding="간격" | 셀(표 안에 있는 작은 칸)과 셀 내용 간격을 픽셀값(5px)으로 지정한다. | |
| cellspacing="간격" | 셀과 셀 사이의 간격을 픽셀값(5px)으로 지정한다. | |
| <tr>에서 사용할 수 있는 속성 | width, height, align, valign, bgcolor, bordercolor, background | |
| <td>에서 사용할 수 있는 속성 | width, height, align, valign, bgcolor, bordercolor, background | |
| colspan="열 수" | 지정한 열 수만큼 가로칸을 합친다. | |
| rowspan="행 수" | 지정한 행 수만큼 세로줄을 합친다. | |
table 태그에 사용할 수 있는 속성은 위 그림과 같다. 사용할 수 있는 속성의 종류가 다양해서 잘 응용하면 여러 모습을 표현할 수 있다.
이제 각각 속성을 사용했을 때 어떤 모습으로 표현되는지 살펴보자.
| 태그 : 테두리 선, 테두리 선 색, 너비 | ||||
|---|---|---|---|---|
|
<table border="1px" bordercolor="#000" width="400px"> <tbody> <tr> <td>첫째 줄 첫째 칸</td> <td>첫째 줄 둘째 칸</td> </tr> <tr> <td>둘째 줄 첫째 칸</td> <td>둘째 줄 둘째 칸</td> </tr> </tbody> </table> |
||||
| 결과 | ||||
|
위 표는 가로세로 2칸씩 총 네 칸짜리 표다. 테두리 굵기는 1픽셀(border="1px"), 테두리 색은 검은색(bordercolor="#000"), 표 너비는 400픽셀(width="400px")이다. 가장 기본적인 표의 모습이다. tr이 두 개 있으니 두 줄짜리 표라는 것을 알 수 있고 tr 안에 td가 두 개 있으니 한 줄에 두 칸이 있는 표라는 것을 확인할 수 있다.
| 태그 : 배경색, 배경 그림, 가로/세로 정렬 | ||||
|---|---|---|---|---|
|
<table border="1px" bordercolor="#000" width="500px" height="200px"> <tbody> <tr bgcolor="red"> <td align="center">첫째 줄 첫째 칸</td> <td align="right" bgcolor="orange">첫째 줄 둘째 칸</td> </tr> <tr background="http://bit.ly/fLS0yT"> <td valign="top">둘째 줄 첫째 칸</td> <td valign="bottom" bgcolor="royalblue">둘째 줄 둘째 칸</td> </tr> </tbody> </table> | ||||
| 결과 | ||||
|
먼저 배경색부터 살펴보자. table에 배경 색을 지정하면 표 전체가 지정한 색으로 표시된다. 그런데 table에 지정된 색과 다른 색으로 tr 배경색을 지정하면 다른 줄은 table 배경색으로 표시되지만, 따로 색을 지정한 tr은 지정한 색으로 표시된다. 여기서 td 배경색을 또 다른 색으로 지정하면 현재 가로줄(tr) 중에서 나머지는 tr 배경색으로, 따로 배경색을 지정한 칸(td)만 따로 지정한 배경색으로 표시된다.
말로는 복잡하지만, 표를 보면 간단하다. 위 표에서 첫 번째 tr의 배경색은 red다. 그래서 첫째 줄 첫째 칸은 빨간색으로 표시된다. 그러나 첫째 줄 둘째 칸은 td에 orange라는 배경색을 따로 지정했다. 그래서 그 칸은 주황색으로 나타난다. 두 번째 tr은 배경 이미지를 지정했다. 둘째 줄 첫째 칸은 지정한 이미지가 표시된다. 그러나 따로 배경색을 지정한 둘째 줄 둘째 칸은 이미지가 표시되지 않고 배경 색이 표시된다. (이유를 정확히 알 순 없지만, IE에서만 이미지가 보이지 않고 크롬, 오페라, 파이어폭스, 사파리에선 제대로 표시되었다. 그래서 위 예제에선 IE에 그림을 표시하기 위해 스타일을 따로 지정했다. 스타일 적용은 다음번에 살펴보자.)
글자 정렬은 보이는 것처럼 가로 정렬, 세로 정렬 모두 사용할 수 있다.
| 태그 : 열 합치기, 행 합치기 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table border="1px" bordercolor="#000" width="500px"> <tbody> <tr> <td colspan="3" align="center">인사말</td> </tr> <tr> <td rowspan="2">한국어/영어</td> <td>안녕.</td> <td>잘 지내지?</td> </tr> <tr> <td>Hi.</td> <td>How's it going?</td> </tr> <tr> <td rowspan="2">프랑스어/일본어</td> <td>Salut.</td> <td>Tu vas bien?</td> </tr> <tr> <td>こんにちは。</td> <td>げんき？</td> </tr> </tbody> </table> | |||||||||||||
| 결과 | |||||||||||||
|
|||||||||||||
행 합치기와 열 합치기는 각 열 및 행을 분류할 때 유용하다. colspan은 세로줄을 합칠 때 사용한다. colspan="3"이라고 지정하면 현재 행(tr) 아래로 배치되는 모든 행에 대해 세 칸을 합친 크기로 표시한다. 그래서 [인사말]이라는 첫째 줄 내용이 아래 줄의 세 칸을 감싸 안는 듯한 모습으로 표시된다. rowspan은 행을 합칠 때 사용한다. rowspan="2"라고 지정하면 현재 행과 다음 행 두 줄을 합쳐서 감싸 안는 듯 표시된다. [한국어/영어]나 [프랑스어/일본어] 칸을 보면 옆의 두 줄을 합친 영역만큼 표시되는 것을 확인할 수 있다. 어떤 내용을 분류해서 표시할 때 꼭 필요한 기능이다.
| 태그 : 셀 간격, 셀과 셀 내용 간격 | ||||
|---|---|---|---|---|
|
<table cellspacing="10px" cellpadding="10px" width="500px" border="1px" bordercolor="#000"> <tbody> <tr> <td>첫째 줄 첫째 칸</td> <td>첫째 줄 둘째 칸</td> </tr> <tr> <td>둘째 줄 첫째 칸</td> <td>둘째 줄 둘째 칸</td> </tr> </tbody> </table> |
||||
| 결과 | ||||
|
cellspacing은 각 셀, 즉 표를 구성하는 작은 칸 하나하나의 간격을 지정하는 속성이다. cellspacing="10px"이라고 지정하면 각 칸의 간격이 10픽셀이 된다. 다른 표와 비교해보면 칸 사이 간격이 넓은 것을 확인할 수 있다. cellpadding은 각 칸 테두리와 칸 내용의 간격이다. cellpadding="10px"이라고 지정하면 칸 테두리 선과 칸 내부의 글자 사이 간격이 최소 10픽셀이 유지된다. 그러나 티스토리에선 cellpadding이 적용되지 않는 것 같다. cellpadding과 같은 효과를 적용하려면 각각의 td에 스타일을 사용해서 padding 값을 따로 지정해야 한다. 스타일 지정은 다음에 알아보자.
이것이 table 태그를 사용한 표 만들기의 가장 기본이 되는 내용이다. 일단 위 내용을 알고 있으면 나중에 스타일을 적용하고 응용해서 구조가 복잡한 표나 각종 효과가 적용된 표를 만들 수 있다.