LabEx
로그인무료 가입

HTML 표 행

HTMLBeginner

소개

표는 데이터를 구조화된 형식으로 표시하는 데 사용될 수 있습니다. 모든 표의 기본 구성 요소는 셀의 행을 정의하는 표 행 () 요소입니다. 표 행은 표 (

) 요소 내에 포함되어야 합니다. 이 랩에서는 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" 속성은 처음 두 행을 단일 행으로 병합합니다.

표 셀 헤더 생성

) 이 있고, 두 번째 행에는 두 개의 데이터 셀 () 이 있습니다.

행 추가하기

표에 더 많은 행을 추가하려면 표에 더 많은

요소를 사용하여 표에 헤더 셀을 만들 수 있습니다. 헤더 셀은 일반적으로 열의 내용을 설명하는 데 사용됩니다. 첫 번째 열에 헤더 셀을 추가하려면 두 번째 행의 첫 번째 요소를 다음 코드로 바꿉니다. 
<th scope="row">Data Cell 1</th>
 요소의 `scope="row"` 속성은 이것이 첫 번째 행의 헤더 셀임을 지정합니다.

요약

이 랩에서는 HTML 표 행을 생성하고 CSS 를 사용하여 표를 사용자 정의하는 방법을 배웠습니다. 또한 인접한 행을 병합하고 표에 헤더 셀을 만드는 방법도 배웠습니다. 이러한 기술을 통해 이제 웹 페이지에 아름답고 구조화된 표를 만들 수 있습니다.

관련 HTML 코스
초보자를 위한 HTML

초보자를 위한 HTML

htmlweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development