표 태그 table 첫번째 (table, thead, tbody, tr, th, td)

table 태그는 표를 만들때 사용합니다.

한글과 ms 워드 등을 사용해 보셨다면 표를 만들어 보신 경험이 있으실 겁니다.  바로 그러한 표를 만드는 녀석입니다.

 

사실 table 태그는 상당히 복잡한 구조입니다. 하드코딩을 하시는 분들도 table은 대부분 위지윅 에디터를 사용해 만들고 붙여 넣기하는 방법으로 많이 사용합니다. 너무 많은 태그들이 반복적으로 나오기 때문이죠. 복잡하다기 보다 귀찮은 존재라고 하는 게 맞겠습니다.

 

table 또한 구조상 그하부로 thead, tbody, tr, th, td 태그를 기본적으로 사용하며 그 외에도 tfoot, caption, colgroup, col등 여러가지를 사용합니다. 살짝 길어질거라는 불길한 예감이 드네요

 

사용법

<table>
    <caption>이번주 식단</caption>
    <thead>
        <tr>
            <th>시기</th>
            <th>월요일</th>
            <th>화요일</th>
            <th>수요일</th>
            <th>목요일</th>
            <th>금요일</th>
            <th>토요일</th>
            <th>일요일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>아침</td>
            <td>된장국</td>
            <td>된장국</td>
            <td>미역국</td>
            <td>샌드위치</td>
            <td>북어국</td>
            <td>카레라이스</td>
            <td>파스타</td>
        </tr>
        <tr>
            <td>점심</td>
            <td>짜장면</td>
            <td>김치찌개</td>
            <td>김밥</td>
            <td>감자탕</td>
            <td>콩나물국밥</td>
            <td>카레라이스</td>
            <td>햄버거</td>
        </tr>
        <tr>
            <td>저녁</td>
            <td>불고기</td>
            <td>칼국수</td>
            <td>된장찌개</td>
            <td>김치볶은밥</td>
            <td>피자</td>
            <td>청국장</td>
            <td>닭갈비</td>
        </tr>
    </tbody>
</table>

 

4줄 표인데도 벌써 이렇게 길어지내요

---

---

 

이번에는 기본적인 설명을 위해 어쩔수 없이 css를 추가 했습니다.

추가된 내용은 table요소에 빨간색 1px 라인과 각각의 칸을 표시하기 위해 th와 td에 회색 1px 라인 입니다.

기본적으로는 라인이 없기때문에 구분이 불가능합니다. 표시하는 방법은 css강좌에서 다시 자세히 다루도록 할 것입니다.

설명을 위해 추가한 것이니 지금은 굳이 해보려 하시지 마시고 이해하는데 중점을 두시면 되겠습니다.

 

먼저 table 자식요소로 caption, thead, tbody 태그가 확인 됩니다. 세요소는 서로 형제요소로 같은 위치에 존재합니다

table 태그 안에 존재하는 것이지요. 이외에 tfoot 요소도 table의 자식요소, tbody의 형제요소로 넣을 수도 있습니다. tbody 아래로 들어가면 됩니다.

tfoot 요소는 많이 쓰이지는 않습니다. 통계, 합 등을 나타낼때 간혹 쓰이는데 사용법은 tbody와 동일하니 tbody를 잘 익혀 두시면 되겠습니다.

 

caption	표의 설명 또는 제목을 나타냅니다
thead	table head - 표 열의 머리글인 행들의 집합입니다
tbody	table body - 표 본문 내용을 나타냅니다.
tfoot	table foot - 표 바닥글에 해당하며  통계 등을 나타내기위해 사용합니다.

---

---

table 태그의 기본사이즈 display 속성은 table 입니다. 지금껏 block, inline, list-item 까지 알아보았습니다.

dispaly : table은 block과도 inline 과도 비슷한 점이 있습니다. 일단 여백조정이 가능하다는 점에서는 블럭과 비슷합니다. 하지만 표의 내용만을 크기로 잡고 있기 때문에 이부분은 인라인 속성과 또 비슷합니다. 두가지 장점을 모두 가지고 있다라고 생각하시면 되겠습니다.

---

---

caption 태그의 기본 사이즈 display 속성은 table-caption 입니다.

table-caption도 블럭속성 처럼 여백 조정이 가능합니다. 특이한 점은 table 속성을 가진 요소 안에서 caption의 크기는 제외되어 분명 table 요소의 자식요소 이지만 형제요소 처럼 작동한다는 점입니다.

---

---

thead 태그의 기본 사이즈 display 속성은 table-header-group 입니다.

table-header-group 속성은 의미 자체가 thead 입니다. 이 속성은 인라인 속성처럼 여백 조정이 불가능하고 가로 세로 크기가 자동으로 설정됩니다.

---

---

tbody 태그의 기본 사이즈 display 속성은 table-row-group 입니다.

여기서 row는 행을 뜻하며 즉 행의 집합이라는 뜻이네요. 얘도 table-header-group 처럼 여백 조정이 안되고 가로 세로 크기가 자동으로 설정됩니다. 인라인 속성과 유사하다라고 생각하시면 될것 같습니다. 의미 정도만 알고 있으면 되겠습니다.

 

thead, tbody 그리고 확인하지는 않았지만 tfoot도 마찬가지로 여백조정이 안되는 것은 어쩌면 당연하다고 생각됩니다. 표의 구조를 보면 행의 높이는 모두 같기 때문입니다. 만약 여백으로 조정할 수 있다면 행이 떨어지는 현상이 발생할 터인데 그렇다면 하나의 표가 아닌 것이 될 것입니다.

 

지금까지 table의 자식 요소에 대해 알아 보았습니다.

다음은 tr 태그에 대해 알아 보겠습니다. 처음 소스를 보시면 tr 태그는 thead와 tbody의 자식 요소로 되어있습니다. tfoot도 마찬가지 입니다. tr 태그는 table row의 약자로 행을 의미합니다. thead는 1줄 짜리 행이고 tbody는 3줄짜리 행이니 각각 1개 3개씩 가지고 있는 겁니다.

---

---

tr 태그의 기본 사이즈 display 속성은 table-row 입니다.

표의 행 이라는 것이네요. 얘도 위에 설명한 이유 처럼 여백 조정이 되지 않습니다.

 

tr은 반드시 th 또는 td 태그를 포함하기 위해서 존재 합니다. th나 td가 없다면 있을 필요가 없습니다. 이전 목록 태그처럼 li가 없다면 ul 이나 ol이 있을 필요가 없는 것 처럼 말이죠. 그러니 쓰임는 ul 또는 ol과 같습니다.

 

그럼 td를 먼저 알아 보겠습니다.

td는 table data의 약자 입니다. tr이 table row 이니가 열을 뜻하는 table column으로 tc라고 사용해야 될것 같지만 data 입니다. 엑셀을 사용해 보셨다면 각각의 칸을 cell이라고 표현하는 것을 보셨을 겁니다. 각각 칸이 어떤 내용을 가지고 있으니 data가 오히려 정확한 표현이라 생각됩니다. 내용을 가지고 있는 칸이라고 생각하시면 됩니다.

tr은 이런 칸을 여러개 가질수 있는 하나의 행이구요

---

---

td 태그의 기본 사이즈 display 속성은 table-cell 입니다.

엑셀에서 말하는 그 cell 맞습니다. 특이하게 td는 안쪽여백(padding)이 지정 가능합니다. 바같쪽은 지정할 수 없구요

그리고 개발자도구의 computed를 확인해 보면 기본사이즈로 안쪽여백을 1px 잡고 있습니다. 이점도 기억해 두시면 좋을 것 같습니다. td는 기본적으로 1px의 안쪽 여백을 가지고 있다라고..

 

박스 모델 강좌에서 바깥쪽 여백은 테두리 바깥쪽이라는 것을 이미 알아보았습니다. 그런데 표의 셀에서 바깥쪽인 존재하지 않으니 바깥쪽 여백은 당연히 표현될 수 없는 것이겠죠.

 

이제 th 입니다.

th는 table header의 약자입니다. thead하고 혼돈 하시면 안됩니다. 이 태그는 td와 같은 cell의 역할을 하는 것입니다. 다르다면 thead안에서 사용하는 것으로 즉 머리글의 td라고 생각하시면 되겠습니다.

---

---

th 태그의 기본 사이즈 display 속성은 예상데로 table-cell 입니다.

그리고 각 열의 제목을 나타내므로 td와 다르게  굵은 글씨체, 가운데 정렬되 다는 것도 기억하시기 바랍니다.

 

벌써 많이 길어 졌지만 td, th에 들어가는 두가지 속성만 더 알려드리고 이번강좌는 마치겠습니다.

표를 보시면 월요일과 화요일 아침은 된장국 입니다. 이런 경우 문서프로그램에서는 그냥 합쳐서 하나로 표현하기도 합니다. td 태그도 이런 기능이 있습니다.

 

colspan="개수" 속성

colspan은 column span 이라고 생각하시면 됩니다. span은 걸치다, 채우다 라는 의미가 있으니 열을 채운다라는 의미가 되겠습니다.  colspan은 항상 시작하는 태그에 작성해 주셔야합니다. 위 예제에서는 월요일 아침 된장국 td 태그에 넣어 주시면 됩니다. 화요일 아침 된장국 td는 자연스럽게 지워 주시면 되겠지요

---

---

rowspan="개수" 속성

열을 합쳤으니 행을 합칠 수 도 있을 겁니다. 이때 사용하는 것이 rowspan 입니다.

토요일 아침과 점심이 카레라이스 이니 colspan과 같은 방법으로 사용해 보면

---

---

그림처럼 표현할 수 있습니다. colspan이든 rowspan이든 중요한 것은 먼저 등장하는 td 태그에 이 속성을 사용해야 한다는 것입니다. 그리고 rowspan의 경우 같은 행에 동일한 data가 없으니 반드시 다음행에서 확인하고 지우셔야 합니다.

 

만약 수요일 아침도 된장국이라면 월요일 아침 된장국 td에 colspan="3"이 될것이고 이렇게 합쳐야 하는 td의 개수를 정한뒤 반드시 그 개수 만큼 동일한 td를 삭제 해야 합니다.

 

지금 표는 비교적 단순해서 문제 요소가 없어 보이지만 이렇게 colspan과 rowspan이 많아 지다 보면 tr태그 안의 td 개수가 알수 없을 정도로 달라지게 되고 혹시라도 지우지 않은 td가 있게 되면 표가 깨지게 되는 것이죠. 그러니 더욱 복잡한 구조가 되는 것이구요 

 

마치기 전에 한가지만 더 말씀드리려 합니다.

위 예제에서 tfoot 요소가 없듯이 다른 표의 경의 thead가 필요 없는 경우도 많이 있습니다. 가령 표가 이번주 식단이 아니라 오늘 식단이라면 thead요소는 필요 없게 됩니다. 이 경우에는 tfoot처럼 thead를 작성하지 않으셔도 됩니다. 그리고 table요소 밑으로 tbody가 아닌 tr이 바로 자식요소로 나와도 상관 없습니다. 웹브라우저가 그런 경우에는 자동으로 tbody를 만들어 주기 때문입니다.

<table>
    <tr>
        <td>아침</td>
        <td>된장국</td>
    </tr>
    <tr>
        <td>점심</td>
        <td>짜장면</td>
    </tr>
    <tr>
        <td>저녁</td>
        <td>불고기</td>
    </tr>
</table>