콘텐츠
HTML로 표를 만드는 방법
요즘 회사에서 갑작스레 HTML을 다룰 일이 많아 졌습니다. 결재 양식을 만드는 작업을 하고 있는데 하필 적용 시켜야할 솔루션이 자체 에디터에 데이터를 넣어야 되므로 JS, JQuery를 적극적으로 활용 할 수 없던 환경 이더군요. 그래도 요즘 워드프레스 테마를 꾸미면서 CSS를 통해 JQuery 없이 효과도 주고 그러니까 저런 환경에서도 그럴듯한 이쁜 레이아웃이 꾸며 졌습니다. 그러다 보니 이번 작업에서 기왕 Table태그로 많이 다뤘으니까 글로 정리해두고자 포스팅 하게 되었습니다.
Table 태그는 단어 그자체와 의미가 동일하게 행과 열로 이루어진 표를 표현하는 HTML 태그 입니다. HTML을 처음 접하게 되면 진짜 자주 사용하게 되는 태그일 겁니다.
<table>
<tr>
<td>테이블</td><td>다루기</td>
</tr>
</table>해당 코드는 아무런 속성을 주지 않은 가장 기본적인 형태로 작성해 보았습니다. 작성하는 법은 제 예전 HTML 기초 글을 보면 좀 더 참고해 주세요.
코드를 가볍게 분석해보면 <table> 태그는 기본적으로 <tr> 태그와 <td> 태그와 함께 사용 됩니다. 이 중 tr은 표의 행을, td는 열을 표현하게 됩니다. r은 로우, d는 데이터 여서 table row, table data의 약자로 기억하시면 좋습니다. 그리고 이렇게 만들어진 표의 한 칸은 cell 이라 합니다. td 사이엔 이 cell 에 입력 될 데이터를 작성해 주시면 됩니다.
예시 코드를 실행하면 이렇게 나옵니다.
뭔가 심심하죠? 테이블과 다루기가 띄어쓰기 되어 있는 텍스트 같아 보이기도 합니다. 이를 좀 더 표처럼 바꾸기 위해 다음 스텝으로 넘어가 봅시다.
표에 테두리, 선 만들기: border 속성
초보인 저희는 결과 값이 눈으로 명확하게 보여야 이해하기가 더 쉬울 것 같습니다. border 속성은 저희가 만들어낸 표에 테두리(선)을 만들어 줍니다. 다음과 같이 table 태그에 border=”1″ 을 추가해 주면 됩니다. 뒤에 숫자는 선의 두께를 나타 냅니다.
<table border="1">
<tr>
<td>테이블</td><td>다루기</td>
</tr>
</table>
아까 만들었던 표에 선이 생겨난 것을 확인 할 수 있습니다. 선이 있으니 좀 더 표처럼 보입니다. 그런데 저희가 별도로 설정을 하지도 않았는데 선이 칸끼리 서로 떨어져 보이는 것 같습니다. 이를 한 줄로 표현 되도록 바꿔 봅시다.
셀 간격 변경하기: cellspacing 속성
cellspacing 간격은 cell(칸) 들의 간격을 조정하기 위한 속성 입니다. 뒤에 숫자 값에 따라 셀 간격을 바꿀 수 있습니다. 기본 값은 “2” 입니다. cell 들의 간격을 없에 선을 한줄로 표현 해 보도록 하겠습니다.
<table border="1" cellspacing="0">
<tr>
<td>테이블</td><td>다루기</td>
</tr>
</table>
셀 내부 여백 변경하기: cellpadding 속성
cellspacing과 글자가 비슷하지만 다른 기능을 하는 cellpadding 속성도 있습니다. 이는 cell 내부의 값과 경계(테두리) 간의 간격을 변경 합니다.
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>테이블</td><td>다루기</td>
</tr>
</table>
표의 이름 적기: caption 태그
tr, td 외에도 table 내부에 적는 태그가 더 있습니다. 그중 하나는 바로 caption 입니다. caption에 입력한 글은 표 맨 위, 가운데 정렬 되어 테이블에 표기 됩니다.
<table border="1" cellspacing="0" cellpadding="10">
<caption>미닛킴 글쓰기용</caption>
<tr>
<td>테이블</td><td>다루기</td>
</tr>
</table>
각 칸의 제목 (header cell) 표기하기: th 태그
대부분의 표는 맨 상단에 각 열이 지닌 데이터의 의미(속성, 칼럼)을 표현하죠. 이와 같은 역할을 하는 cell 을 만들때 th 태그를 사용 합니다. 사실 th를 안쓰고 td로 맨 첫 행에 값을 입력해도 되지만 th 태그를 이용해야 제목이 되는 행에만 다른 색깔을 지정하는 등 프로그래밍 시 구분 할 수 있게 됩니다.
사용법은 td와 같고 tr안에 작성 됩니다. 제목으로 입력된 값들은 기본적으로 굵게(bold)로 표현 됩니다.
<table border="1" cellspacing="0" cellpadding="10">
<caption>미닛킴 글쓰기용</caption>
<tr>
<th>이름</th><th>성별</th>
<tr>
<td>홍길동</td><td>남</td>
</tr>
<tr>
<td>심춘향</td><td>여</td>
</tr>
</table>
마무리
table 태그의 기본적인 것은 이렇게 정리 되었네요. 이 외에도 css 와 javascript를 이용하면 되게 여러가지 효과, 기능을 지닌 표를 만들 수 있습니다. 이는 이후 포스팅에서 더 작성해 보도록 하겠습니다. 블로그를 방문해 주신 분들에게 감사를 표합니다. 👍
