키스세븐지식
웹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"가 붙어 있습니다. 세로로 두개의 칸을 병합해서 하나로 쓰겠다는 것입니다. 이렇게 해서 두번째 줄과 세번째 줄의 칸 두개가 세로로 병합되었습니다.
표를 태그로 만들 때는 위처럼 전체적인 구조를 먼저 만든 다음에 추가하거나 변경해야 헤깔리지 않습니다. 머리 속에 전체적인 가로 칸과 세로 칸에 대한 개수가 계산되야 하기 때문입니다.
만약 도저히 태그로 못 하겠다고 한다면, 웹에디터 프로그램을 구입하여 워드처럼 표를 그린 뒤에 태그를 복사해서 붙이는 방법도 있습니다.
간혹 외국 홈페이지를 보면 웹사이트 상에서 표를 바로 만들어주는 기능이 있는 홈페이지를 찾을 수가 있습니다. 물론 검색의 수고는 해야할지 모릅니다만....
★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
