소개
이 랩에서는 HTML 테이블에서 테이블 데이터를 정의하는 데 사용되는 HTML <td> 태그에 대해 배우게 됩니다. 또한 이 태그와 함께 사용할 수 있는 다양한 속성에 대해서도 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 테이블 생성하기
첫 번째 단계는 데이터를 사용하여 HTML 테이블을 만드는 것입니다. index.html 파일을 열고 다음 코드를 추가하십시오.
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
여기서는 두 개의 행과 세 개의 열이 있는 HTML 테이블을 만들었습니다. <td> 태그는 테이블의 각 셀의 내용을 정의하는 데 사용됩니다.
Colspan 속성 사용하기
colspan 속성은 셀이 몇 개의 열을 걸쳐야 하는지 지정하는 데 사용됩니다. colspan 속성을 사용하려면 다음 코드를 추가하십시오.
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td colspan="2">John Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
여기서는 colspan 속성을 사용하여 처음 두 열을 걸쳐 한 셀에 사람의 이름을 표시했습니다.
Rowspan 속성 사용하기
rowspan 속성은 셀이 몇 개의 행을 걸쳐야 하는지 지정하는 데 사용됩니다. rowspan 속성을 사용하려면 다음 코드를 추가하십시오.
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<td rowspan="2">John</td>
<td>Doe</td>
<td>22</td>
</tr>
<tr>
<td colspan="2">Male</td>
</tr>
<tr>
<td rowspan="2">Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">Female</td>
</tr>
</table>
</body>
</html>
여기서는 rowspan 속성을 사용하여 이름 열을 두 행에 걸쳐 한 셀에 사람의 이름을 표시했습니다.
Header 속성 사용법
header 속성은 셀이 하나 이상의 헤더 셀과 관련되어 있음을 지정하는 데 사용됩니다. header 속성을 사용하려면 다음 코드를 추가하십시오.
<!doctype html>
<html>
<head>
<title>HTML TD Tag Lab</title>
</head>
<body>
<table>
<tr>
<th id="name-header">Name</th>
<th>Age</th>
</tr>
<tr>
<td headers="name-header">John Doe</td>
<td>22</td>
</tr>
<tr>
<td headers="name-header">Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
여기서는 header 속성을 사용하여 첫 번째 열이 ID 가 name-header인 헤더 셀과 관련되어 있음을 지정했습니다.
요약
축하합니다! HTML 테이블에서 테이블 데이터를 정의하기 위해 HTML <td> 태그를 사용하는 방법을 배웠습니다. 또한 이 태그와 함께 사용하여 더 복잡한 테이블을 만들 수 있는 colspan, rowspan, 그리고 header와 같은 다양한 속성에 대해서도 배웠습니다.
