● 목적
HTML에서 사용되는 <table> 태그와, 함께 사용하는 <th>, <tr>, <td> 의 개념과 사용 방법에 대해 알아본다.
● 참고
일반적으로 우리가 '아래아한글' 에서 사용하던 것과 비슷한 개념의 표를 제작할 때 사용한다. HTML5에서는 권장되지 않지만, 이전에는 <table> 태그를 통해 웹페이지 레이아웃을 제작하기도 했었던 태그이다. 이제는 가급적이면 <table> 태그를 통해 웹페이지 레이아웃이 아닌 데이터값이 들어있는 표만 사용하는 것이 권장된다.
● table, th, tr, td 태그
<th> 태그Table Head의 약자로, 표의 제목을 만드는 역할을 한다.
기본값은 볼드체와 중앙 정렬.
<tr> 태그Table Row의 약자로, 표의 가로줄을 만드는 역할을 한다.
기본값은 좌측 정렬.
<td> 태그Table Data의 약자로, 표의 셀을 만드는 역할을 한다. <td></td> 사이에 데이터값을 삽입할 수 있다.
기본값은 좌측 정렬.
● HTML table 사용 연습
아래아한글을 통해 간단한 샘플 표 예시를 만들어 보았다. 지금부터는 HTML을 통해, 위와 같은 표를 만드는 예시를 알아보자.
우선 이름과 정보는 th태그를 사용하면 되겠고, tr태그를 5번 이용해 가로줄을 그어주고, td태그를 한 가로줄마다 두 번 사용하여 데이터값을 삽입하면 되겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px">
<th>이름</th>
<th>정보</th>
<tr>
<td>홍길동</td>
<td>남성</td>
</tr>
<tr>
<td>김철수</td>
<td>남성</td>
</tr>
<tr>
<td>김영희</td>
<td>여성</td>
</tr>
<tr>
<td>최길동</td>
<td>남성</td>
</tr>
<tr>
<td>강길동</td>
<td>남성</td>
</tr>
</table>
</body>
</html>
table border?
HTML에 어떠한 스타일도 적용하지 않고 <table></table> 태그만 이용하여 표를 만들 시, 지정된 스타일값이 없기 때문에 테두리가 표시되지 않는다. 본 코드에서는 표에 테두리를 표시하기 위해 <table> 태그에 border 속성을 사용했다.
● 결과
위와 같이 정상적으로 표가 그려진 것을 확인할 수 있다.