HTML 테이블 표 만들기 태그
[HTML 쉽게 따라하기] HTML 테이블 표 만들기 태그
테이블이란 쉽게 말해 문서에서 표와 같은 기능입니다.
테이블을 사용하는 이유는 테이블 없이 문자로만 복잡하게 구분된 문서를 만들어 낸다면 홈페이지가 조금은 산만하게 보일 수 있기 때문에 테이블을 이용해서 간결하고 보기 좋게 문서를 표현하는 것입니다.
그럼 테이블을 만들어 볼까요.
테이블의 기본 구조는 다음과 같습니다.
[예시 1]----------------------------------------
<tabel border>
<caption> 표 </caption>
<tr>
<th>...</th><th>.....</th>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
</table>
-------------------------------------------------
예시1 을 보면 테이블 태그 안에 여러 태그가 사용된 것을 알 수 있습니다.
그 중 가장 기본적으로 알아야 하는 태그 table border, table, tr, td, th 태그들에 대해 설명해 드릴께요.
● 표 만들기 각 태그 설명
<table> 태그는 테이블을 사용하기 위해서 가장 처음에 사용하는 태그입니다. 이때 border 속성을 이용해 테이블의 테두리 굵기를 조절할 수 있습니다.
<table>...</table> 태그는 독립적으로 사용하지 않고 <tr>태그와 <td>태그 그리고 <th>태그와 함께 사용됩니다.
<tr>태그는 Table Row의 약자로 테이블의 '줄 수'를 지정할 때 사용하며
<td>태그는 Talble Data의 약자로 표에 해당하는 내용을 지정해 줍니다.
<th>태그는 Table Header의 약자로 테이블의 첫째줄에 제목을 쓸 때 사용합니다.
다음은 <table> 태그를 이용해 간단한 테이블을 작성해본 예입니다.
[예시2]-----------------------------------------
<html>
<head>
<title>계절</title>
</head>
<body>
<center>
<h3>사계절</h3>
<table border>
<tr>
<td>봄</td>
</tr>
<tr>
<td>여름</td>
</tr>
<tr>
<td>가을</td>
</tr>
<tr>
<td>겨울</td>
</tr>
</table>
</center>
</body>
</html>
------------------------------------------------
메모장에 위 html 소스를 넣고 제목.html 로 저장하면 인터넷 파일로 저장되는데
저장된 파일을 불러오면 아래 그림처럼 인터넷 창이 나옵니다.
위에 제목, 아래로 사칸의 테이블과 그안에 글자들이 입력된것을 볼 수 있습니다.
오늘은 기본적인 테이블을 만드는 태그에 대해 알아 보았습니다.
다음 시간엔 표를 편집하는 방법에 대해 알아보도록 하겠습니다.
이 글을 공유합시다
