HTML 기초, <table>의 기본구조와 <table> <tr> <td> 태그 (15번째)
HTML 기초, <table>의 기본구조와 <table> <tr> <td> 태그
이제는 <table> 작성에 대해서 배울 차례입니다. <table>은 표를 말합니다. 한글문서작성하실 때 표 만들잖아요?
이 표(테이블)는 대부분의 사이트에서 사용되고 있습니다. 하지만 우리가 딱 구분하기는 어렵습니다. <table>은 단순히
표로 사용하지 않고 문서의 레이아웃을 위해 사용하기 때문에 표(테이블)의 경계선이 나타나지 않도록 설정합니다.
홈페이지를 얼마나 효율적으로 구성하는가는 표(테이블)을 얼마나 잘 사용하느냐에 달려 있다고 합니다. ^^
◎ 테이블의 기본구조
테이블은 '표'라고 생각하면 됩니다. 표는 셀들의 집합으로 표현하고 셀은 행과 열에 의해서 생성됩니다.
HTML 문서에서 테이블을 만들기 위해서는 <table> 태그를 사용합니다. 테이블은 표이기에 셀을 만들어 줘야 됩니다.
셀은 <tr> 과 <td> 태그로 원하는 모양으로 만들 수 있습니다.
|
태그 |
설명 |
|
<table> |
테이블을 선언하는 태그 |
|
<caption> |
테이블의 제목을 표시하고자 할 때 사용하는 태그 |
|
<tr> |
테이블 내에 한 행을 정의하는 태그 |
|
<th> |
셀 제목으로 지정하여 강조되게 표시하는 태그 |
|
<td> |
테이블 내의 한 열 즉, 각 행에 포함된 셀을 만들 때 사용하는 태그 |
테이블 종류에 따라 사용되는 태그들은 조금씩 다르지만 기본 형식은 다음과 같은 구조를 따릅니다.
<table>
<tr>
<th> 제목 1 </th> <th> 제목 2 </th> <th> 제목 3 </th>
</tr>
<tr>
<td> 내용 1 </td> <td> 내용 2 </td> <td> 내용3 </td>
</table>
◎ 테이블을 만드는 <table> 태그
하나의 테이블을 완성하기 위해서는 <table> 태그를 사용해야 됩니다. 이때 종료 태그 </table>는 꼭 기술해야 됩니다.
예문)
<table> ~ </table>
◎ 셀을 만드는 <tr>, <td> 태그
<tr> 태그는 "table row"의 약어로 테이블 내에 있는 행을 정의하는 태그입니다.
이 태그를 입력할 때마다 새로운 행이 생깁니다. 행을 3개 만들고 싶으면 <tr> 태그를 3번 정의해 주면 됩니다.
그리고 각 행마다 들어가는 셀(cell)은 <tr> 태그를 함께 기술해야 됩니다.
<td> 태그는 "table data"의 약어로 각 행의 셀(cell)을 만들 때 사용하는 태그입니다.
<tr> 태그로 행을 정의한 다음 각 셀을 만들어 내용을 넣어주는 태그. <td> 태그의 개수만큼 셀이 만들어 집니다.
◎ 테이블에 테두리 표시와 빈 셀 작성하기
<table> 태그로 테이블을 작성하면 테두리가 표시되지 않습니다. 테두리를 보이게 하기위해서는 "border" 속성을
사용해야 합니다. 그리고 테이블을 만들다 보면 셀에 아무 내용도 넣지 않을 경우가 생깁니다.
<td> 와 </td> 사이에 아무내용이 없으면 빈 셀이 됩니다. 이러면 해당 셀의 테두리가 나타나지 않습니다.
이런경우에는 셀의 내용으로 공백문자( )를 넣어서 해결하면됩니다.
◎ 테이블 안에 이미지 삽입하기
이미지를 테이블에 삽입하기 위해서는 이미지 태그 <img src="이미지 파일명">을 <td> 태그 안에 삽입해야 됩니다.
