소개
표는 데이터를 구조화된 형식으로 표시하는 데 사용될 수 있습니다. 모든 표의 기본 구성 요소는 셀의 행을 정의하는 표 행 () 요소입니다. 표 행은 표 () 요소 내에 포함되어야 합니다. 이 랩에서는 HTML 표 행을 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 표 구조 생성
HTML 표를 만들려면 먼저 표의 구조를 정의해야 합니다. index.html이라는 HTML 파일을 생성하여 시작합니다. 파일에 다음 코드를 추가합니다.
<!doctype html>
<html>
<head>
<title>My Table</title>
</head>
<body>
<table>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
</table>
</body>
</html>
이 코드에서는 두 개의 행과 두 개의 열이 있는 HTML 표를 만들었습니다. 첫 번째 행에는 두 개의 헤더 셀 (
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
이제 표에는 세 개의 행이 있으며, 각 행에는 두 개의 셀이 포함되어 있습니다.
표 행 스타일 지정
CSS 를 사용하여 표 행에 스타일을 추가할 수 있습니다. 짝수 행에 배경색을 추가하려면 요소에 다음 스타일을 추가합니다.
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>
이 코드는 표의 두 번째 행마다 lightgray 배경색을 추가합니다.
표 행 병합
rowspan 속성을 사용하여 두 개 이상의 인접한 행을 단일 행으로 병합할 수 있습니다. 예를 들어, 처음 두 행을 단일 행으로 병합하려는 경우를 가정해 보겠습니다. 첫 번째
<tr>
<th rowspan="2">Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
첫 번째 헤더 셀의 rowspan="2" 속성은 처음 두 행을 단일 행으로 병합합니다.
표 셀 헤더 생성
| ) 이 있고, 두 번째 행에는 두 개의 데이터 셀 ( | ) 이 있습니다.
행 추가하기표에 더 많은 행을 추가하려면 표에 더 많은 | |
|---|---|---|
| 요소를 사용하여 표에 헤더 셀을 만들 수 있습니다. 헤더 셀은 일반적으로 열의 내용을 설명하는 데 사용됩니다. 첫 번째 열에 헤더 셀을 추가하려면 두 번째 행의 첫 번째 | 요소를 다음 코드로 바꿉니다.
| 요소의 `scope="row"` 속성은 이것이 첫 번째 행의 헤더 셀임을 지정합니다.
요약이 랩에서는 HTML 표 행을 생성하고 CSS 를 사용하여 표를 사용자 정의하는 방법을 배웠습니다. 또한 인접한 행을 병합하고 표에 헤더 셀을 만드는 방법도 배웠습니다. 이러한 기술을 통해 이제 웹 페이지에 아름답고 구조화된 표를 만들 수 있습니다. |
