HTML 에서 <tbody> 태그는 HTML 테이블의 본문을 나타내는 데 사용되며, 테이블 내의 일련의 행으로 구성됩니다. 이 랩에서는 <tbody> 태그를 사용하여 간단한 HTML 테이블을 만드는 단계를 안내합니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
선호하는 코드 편집기에서 index.html이라는 빈 HTML 파일을 생성합니다.
HTML 파일의 <body> 섹션에 <table> 태그를 생성합니다.
<body>
<table></table>
</body><table> 태그 내에서 <thead> 태그를 생성하고, 그 안에 <th> 태그를 사용하여 헤더 행을 추가합니다.
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table><table> 태그 내에서 <tbody> 태그를 생성하고, 그 안에 <td> 태그를 사용하여 행을 추가합니다.
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</tbody>
</table><table> 태그 내에서 <tfoot> 태그를 생성하고, 그 안에 <td> 태그를 사용하여 푸터 행을 추가합니다.
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2 People</td>
</tr>
</tfoot>
</table>CSS 를 사용하여 테이블의 스타일을 지정합니다. 필요에 따라 <thead>, <tbody>, <tfoot>을 포함할 수 있습니다.
<style>
table {
border-collapse: collapse;
width: 50%;
}
th,
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
color: #444;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tfoot td {
text-align: right;
font-weight: bold;
}
</style>이 랩에서는 <tbody> 태그를 사용하여 행과 열이 있는 HTML 테이블을 만드는 방법을 배웠습니다. 단계를 따라 헤더, 본문 및 푸터 섹션이 있는 간단한 테이블을 만들고 CSS 로 테이블의 스타일을 지정하여 더욱 전문적인 모습을 연출했습니다. <tbody> 태그는 HTML 에서 복잡한 테이블을 구축하는 데 유용한 도구이며, 동적이고 상호 작용적인 데이터 시각화를 만들기 위해 다른 테이블 요소와 함께 자주 사용됩니다.
