HTML 테이블은 행 (rows) 과 열 (columns) 로 구성되어 데이터를 구조화된 표 형식으로 표시하는 데 사용됩니다. 이는 제품 비교, 재무 보고서 또는 일정과 같은 정보를 명확하고 체계적으로 제시하는 데 필수적입니다.
이 실습에서는 HTML 테이블의 기본적인 구성 요소를 배우게 됩니다. 기본적인 테이블 구조를 만드는 것부터 시작하여 점진적으로 행, 헤더 및 데이터 셀을 추가하여 완전하고 기능적인 테이블을 구축할 것입니다.
이 단계에서는 테이블의 메인 컨테이너를 생성합니다. <table> 태그는 모든 HTML 테이블의 루트 요소이며 다른 모든 테이블 관련 요소를 포함합니다.
먼저 기본적인 HTML 문서 구조를 설정해 보겠습니다. 왼쪽에 있는 파일 탐색기에서 ~/project 디렉토리에 있는 index.html 파일을 찾아 엽니다.
다음의 보일러플레이트 코드를 index.html에 추가합니다. 이 코드는 표준 HTML5 문서를 정의하고 <body> 내에 비어 있는 <table> 요소를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table></table>
</body>
</html>코드를 추가한 후 인터페이스 상단의 Web 8080 탭을 클릭하여 페이지를 미리 볼 수 있습니다. 테이블이 비어 있으므로 아직 아무것도 보이지 않지만, 파일이 올바르게 제공되고 있음을 확인할 수 있습니다.
이 단계에서는 테이블에 행을 추가합니다. 테이블의 모든 가로 행은 "table row"를 의미하는 <tr> 태그로 정의됩니다. 헤더나 데이터 셀과 같이 행 안의 모든 콘텐츠는 <tr> 요소 안에 배치되어야 합니다.
테이블에 두 개의 행을 추가해 보겠습니다. 첫 번째 행은 열 헤더를, 두 번째 행은 데이터를 담게 될 것입니다.
index.html 파일을 수정하여 <table> 태그 안에 두 개의 <tr> 요소를 다음과 같이 포함시키세요.
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr></tr>
<tr></tr>
</table>
</body>
</html>파일을 저장합니다. Web 8080 탭을 확인하면 행에 아직 콘텐츠나 테두리가 없기 때문에 시각적인 변경 사항은 여전히 보이지 않을 것입니다.
이 단계에서는 테이블의 헤더 셀을 정의합니다. 헤더 셀은 "table header"를 의미하는 <th> 태그를 사용하여 생성됩니다. 이 태그들은 <tr> 요소 안에 배치되며, 일반적으로 일반 데이터 셀과 구별하기 위해 굵고 가운데 정렬된 텍스트로 렌더링됩니다.
테이블의 첫 번째 행에 "Name"과 "Age"라는 두 개의 헤더를 추가해 보겠습니다.
첫 번째 <tr> 태그 안에 두 개의 <th> 요소를 추가하여 index.html 파일을 업데이트하세요.
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr></tr>
</table>
</body>
</html>이제 Web 8080 탭으로 전환하면 "Name"과 "Age" 헤더가 표시되는 것을 볼 수 있습니다.
이 단계에서는 테이블에 실제 데이터를 추가합니다. 표준 데이터 셀은 "table data"를 의미하는 <td> 태그로 생성됩니다. 이 태그들은 <tr> 요소 안에 배치되며, 열 헤더에 해당하는 정보를 포함합니다.
"Alice"라는 이름의 30 세 사람에 대한 데이터 행을 추가해 보겠습니다. 이 데이터는 테이블의 두 번째 행에 들어갑니다.
두 번째 <tr> 태그 안에 두 개의 <td> 요소를 추가하여 index.html 파일을 업데이트하세요.
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>
</body>
</html>파일을 저장하고 Web 8080 탭을 확인합니다. 이제 두 번째 행에 "Alice"와 "30"이라는 데이터가 해당 헤더 아래에 정렬되어 표시되는 것을 볼 수 있습니다.
이 단계에서는 테이블의 구조를 보이게 만듭니다. 기본적으로 HTML 테이블은 테두리 없이 렌더링됩니다. 시각화를 위해 테두리를 빠르게 추가하려면 <table> 태그에 border 속성을 사용할 수 있습니다.
테이블에 1 픽셀 테두리를 추가해 보겠습니다. index.html에서 여는 <table> 태그를 border="1"을 포함하도록 수정하세요.
<!DOCTYPE html>
<html>
<head>
<title>My First Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>
</body>
</html>파일을 저장한 후 Web 8080 탭을 새로고침합니다. 이제 테이블과 각 셀 주위에 명확한 테두리가 표시되어 행과 열 구조를 보여주는 완성된 테이블을 볼 수 있습니다. border 속성은 간단하지만, 현대 웹 디자인에서는 CSS 를 사용하여 스타일링하며, 이는 훨씬 더 많은 제어와 유연성을 제공합니다.
축하합니다! 기본적인 HTML 테이블을 성공적으로 생성했습니다.
이 실습에서는 다음을 배웠습니다.
<table> 태그 사용하기<tr> 태그 사용하기<th> 태그 사용하기<td> 태그 사용하기border 속성 추가하기이것들은 웹 페이지에 모든 종류의 표 형식 데이터를 표시하는 데 필수적인 요소입니다. 이제 이 기초를 바탕으로 더 복잡하고 스타일이 적용된 테이블을 만들 수 있습니다.
