소개
HTML 테이블은 웹 페이지에서 표 형식 데이터를 표시하는 데 일반적으로 사용됩니다. 이 랩에서는 <table>, <tr>, <td>, 그리고 <th> 태그를 사용하여 기본적인 HTML 테이블을 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스는 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 실행합니다. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
테이블 생성
index.html이라는 새로운 HTML 파일을 생성하고 기본 구조를 설정하는 것으로 시작해 보겠습니다. <body> 태그 내에 <table> 요소를 생성합니다. 이 요소는 테이블의 모든 행과 열을 포함합니다.
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table></table>
</body>
</html>
행 정의
다음으로, <tr> 태그를 사용하여 테이블의 행을 정의합니다. 각 행은 하나 이상의 셀을 포함합니다. 단일 셀을 생성하려면 <td> 태그를 사용합니다.
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
테이블 헤더 추가
경우에 따라 테이블에 헤더 행을 추가하고 싶을 수 있습니다. 이렇게 하려면 <td> 태그 대신 <th> 태그를 사용합니다.
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
테두리 및 스타일 추가
기본적으로 HTML 테이블은 최소한의 스타일과 테두리가 없습니다. 테이블에 테두리를 추가하려면 CSS border 속성을 사용합니다.
<!doctype html>
<html>
<head>
<title>HTML Table Tutorial</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>
요약
이 튜토리얼을 통해 기본적인 HTML 테이블을 만들고 CSS 를 사용하여 스타일을 지정하는 방법을 배웠습니다. 테이블은 셀에 colspan 및 rowspan과 같은 속성을 추가하고 <caption> 및 <thead>와 같은 추가 태그를 사용하여 더욱 사용자 정의할 수 있습니다. 이러한 도구를 사용하면 웹 페이지에 데이터를 표시하기 위해 복잡하고 유익한 테이블을 만들 수 있습니다.
