[HTML5]쉽고 간편한 HTML Table 만들기: 초보자도 할 수 있는 완벽 가이드

728x90

SMALL

HTML Table은 웹 페이지에서 데이터를 체계적으로 표시하는 데 사용됩니다. 이번 포스팅에서는 HTML 표를 만드는 기본 방법부터 다양한 속성과 스타일링 기법, 그리고 접근성 향상 방법을 소개하겠습니다.

≣ 목차

HTML Table의 기본 구조🏠
머리글과 본문 구분: <thead>, <tbody>, <tfoot> 태그 🌈
열 그룹화: <col>, <colgroup> 태그⭐
HTML Table 셀 병합하기: colspan과 rowspan⭐
HTML 표 스타일링🏰
웹 접근성 고려🍀
핵심 내용👀

HTML Table의 구조🏠

HTML table은 웹 페이지에서 데이터를 체계적으로 표시하는 데 사용되는 중요한 요소입니다.
기본적으로 <table> 태그로 시작하고, 표의 행(row), 열(column), 머리글(header) 등으로 구성됩니다. 각 요소는 HTML 태그로 정의됩니다. 아래에서 HTML table의 기본 구조와 각 요소의 역할을 자세히 설명하겠습니다.

<table> 태그

<table> 태그는 표를 정의하는 가장 바깥쪽 태그입니다. 이 태그 안에 표의 모든 내용이 포함됩니다.

<table>
    <!-- 표의 내용이 여기에 들어갑니다 -->
</table>

<tr> 태그

<tr> 태그는 표의 행(row)을 정의합니다. 각 행은 여러 개의 셀(cell)로 구성되며, 이러한 셀들은 <td>또는 <th> 태그로 정의됩니다.

<table>
    <tr>
        <!-- 행의 내용이 여기에 들어갑니다 -->
    </tr>
</table>

<td> 태그

<td> 태그는 표의 데이터 셀(data cell)을 정의합니다. 각 셀은 개별 데이터를 포함하며, <tr> 태그 안에 위치합니다.

<table>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

<th> 태그

<th> 태그는 표의 머리글 셀(header cell)을 정의합니다. 머리글 셀은 보통 텍스트를 굵게 표시하고 중앙 정렬합니다.
<th> 태그는 <tr> 안에 위치하며, 주로 표의 첫 번째 행에 사용됩니다.

<table>
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

머리글과 본문 구분: <thead>, <tbody>, <tfoot> 태그 🌈

HTML 표는 데이터를 체계적으로 표시하기 위해 다양한 태그를 사용합니다. 그중에서도 <thead>, <tbody>, <tfood> 태그는 는 행을 묶어 그룹화할 수 있는데, 표의 머리글, 본문, 바닥글을 정의하는 데 사용됩니다. 이 태그들을 사용하면 표의 구조를 더 명확하게 구분할 수 있고, 스타일링 및 접근성을 향상시킬 수 있습니다.

<thead> 태그

<thead> 태그는 표의 머리글 부분을 정의합니다. 일반적으로 열 제목을 포함하는 행을 포함합니다. <thead> 태그 안에는 하나 이상의 <tr> 태그가 들어가며, <tr> 태그 안에는 <th> 태그가 주로 사용됩니다.

<table>
    <thead>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
    </thead>
    <!-- 표의 본문 및 바닥글 -->
</table>

<tbody> 태그

<tbody> 태그는표의 본문 부분을 정의합니다. 데이터 행들을 포함하며, <tbody> 태그 안에는 여러 개의 <tr> 태그가 들어갑니다. 각 <tr> 태그 안에는 <th> 태그를 사용하여 개별 셀을 정의합니다.

<table>
    <!-- 표의 머리글 -->
    <tbody>
        <tr>
            <td>내용 1</td>
            <td>내용 2</td>
        </tr>
        <tr>
            <td>내용 3</td>
            <td>내용 4</td>
        </tr>
    </tbody>
    <!-- 표의 바닥글 -->
</table>

<tfoot> 태그

<tfoot>태그는표의 바닥글 부분을 정의합니다. 일반적으로 표의 요약 정보나 총계를 포함하는 행을 포함합니다.<tfoot> 태그 안에는 하나 이상의 <tr> 태그가 들어가며, <tr> 태그 안에는 <td> 태그가 주로 사용됩니다.

<table>
    <!-- 표의 머리글 및 본문 -->
    <tfoot>
        <tr>
            <td>바닥글 1</td>
            <td>바닥글 2</td>
        </tr>
    </tfoot>
</table>

<thead>, <tbody>, <tfoot> 구조 예제

<table>
    <thead>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용 1</td>
            <td>내용 2</td>
        </tr>
        <tr>
            <td>내용 3</td>
            <td>내용 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>바닥글 1</td>
            <td>바닥글 2</td>
        </tr>
    </tfoot>
</table>

이 예제는 표의 각 부분을 명확하게 구분하여 구조화된 데이터를 제공하며, 표의 머리글, 본문, 바닥글을 각각 <thead>, <tbody>, <tfoot> 태그로 나누어 정의하였습니다. 이를 통해 표의 구조를 더 명확히 하고, 스타일링 및 접근성을 더욱 향상할 수 있습니다.

전체 HTML Table 구조 예제

아래는 위에서 설명한 모든 요소를 포함한 HTML table의 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Table 예제</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>제목 1</th>
                <th>제목 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>내용 1</td>
                <td>내용 2</td>
            </tr>
            <tr>
                <td>내용 3</td>
                <td>내용 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>바닥글 1</td>
                <td>바닥글 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

이 예제는 간단한 2x3 표를 생성합니다. <thead>, <tbody>, <tfoot> 태그를 사용하여 표의 머리글, 본문, 바닥글을 명확히 구분했습니다. 각 행은 <tr> 태그로 정의되고, 각 셀은 <td> 및 <th> 태그로 정의되었습니다.

열 그룹화: <col>, <colgroup> 태그⭐

<col> 및 <colgroup> 태그는 HTML 테이블의 열을 정의하고 스타일을 적용하는 데 사용됩니다.

<col> 태그

<col> 태그는 테이블의 열을 정의합니다. 각 <col> 태그는 테이블의 열 하나에 해당하며, 속성을 사용하여 해당 열에 스타일을 적용할 수 있습니다. 이러한 스타일링은 특정 열에만 적용되며, <th> 및 <td> 태그에서 스타일을 오버라이드 할 수 있습니다.

<colgroup> 태그

<colgroup> 태그는 연관된 열들을 그룹화하여 스타일을 적용할 때 사용됩니다. <col> 태그와 함께 사용하여 열 그룹에 대한 스타일을 한꺼번에 설정할 수 있습니다. <col> 태그와 <colgroup> 태그를 함께 사용하여 테이블의 열에 대한 스타일링 및 구조를 조정할 수 있습니다.

<col>, <colgroup> 태그 예제

<table>
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
  </tr>
  <tr>
    <td>내용 1</td>
    <td>내용 2</td>
  </tr>
</table>

이 표는 <colgroup> 태그를 사용하여 두 개의 열 그룹을 정의하고 각 열에 배경색을 지정합니다. 첫 번째 열은 연한 파란색(lightblue) 배경색이 적용되고, 두 번째 열은 연한 녹색(lightgreen) 배경색이 적용됩니다. 이러한 스타일은 각 열에 일괄적으로 적용되며, 테이블의 머리글과 본문에는 제목 1과 제목 2, 내용 1과 내용 2가 포함됩니다. 이것은 표의 열을 시각적으로 그룹화하고 각 열에 일관된 스타일을 적용하여 가독성을 향상하는 데 도움이 됩니다.

HTML Table 셀 병합하기: colspan과 rowspan⭐

HTML table에서 셀을 병합하면 더 복잡한 레이아웃을 만들 수 있습니다. 셀 병합에는 두 가지 주요 속성인 colspan과 rowspan이 사용됩니다. colspan은 셀을 가로로 병합하고, rowspan은 셀을 세로로 병합합니다. 셀을 병합할 때 각 셀의 위치를 정확히 지정해야 합니다. 잘못된 위치에 병합을 시도하면 예기치 않은 결과가 발생할 수 있습니다. 이러한 속성과 사용 예제를 통해 이 기능을 자세히 설명하겠습니다.

colspan : 셀을 가로로 병합

colspan 속성은 하나의 셀이 여러 열을 차지하도록 합니다. 예를 들어, colspan="2" 는 해당 셀이 두 개의 열에 걸쳐 있음을 의미합니다.

<table>
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
        <th>제목 3</th>
    </tr>
    <tr>
        <td colspan="2">가로로 병합된 셀</td>
        <td>내용 3</td>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
        <td>내용 3</td>
    </tr>
</table>

위 예제에서 두 번째 행의 첫 번째 셀은 colspan="2"속성을 사용하여 두 개의 열을 병합합니다.

rowpan : 셀을 세로로 병합

rowspan 속성은 하나의 셀이 여러 행을 차지하도록 합니다. 예를 들어, rowspan="2"는 해당 셀이 두 개의 행에 걸쳐 있음을 의미합니다.

<table>
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
        <th>제목 3</th>
    </tr>
    <tr>
        <td rowspan="2">세로로 병합된 셀</td>
        <td>내용 2</td>
        <td>내용 3</td>
    </tr>
    <tr>
        <td>내용 4</td>
        <td>내용 5</td>
    </tr>
</table>

위 예제에서 두 번째 행의 첫 번째 셀은 rowspan="2" 속성을 사용하여 두 개의 행을 병합합니다.

전체 예제: colspan과 rowspan 함께 사용하기

아래는 colspan과 rowspan 속성을 모두 사용하여 셀을 병합한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>셀 병합 예제</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
            <th>제목 3</th>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">가로와 세로로 병합된 셀</td>
            <td>내용 3</td>
        </tr>
        <tr>
            <td>내용 4</td>
        </tr>
        <tr>
            <td>내용 1</td>
            <td>내용 2</td>
            <td>내용 3</td>
        </tr>
    </table>
</body>
</html>

이 예제에서는 첫 번째 셀을 rowspan="2"와 colspan="2" 속성을 사용하여 두 개의 열과 두 개의 행을 병합했습니다. 이를 통해 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

HTML 표 스타일링🏰

HTML에서는 기본적으로 테두리가 없게 설정되어 있습니다. 따라서 테두리를 포함한 스타일링을 적용하기 위해서는 CSS를 사용해야 합니다. 이 예제는 CSS를 사용하여 테두리, 셀 여백, 배경색, 텍스트 정렬 등을 설정했습니다. HTML table을 스타일링할 때 CSS를 사용하면 더 많은 제어와 일관성을 유지할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Table 스타일링 예제</title>
    <style>
        /* table 전체의 스타일을 정의 */
        table {
            width: 100%; /* 표 너비를 100%로 설정 */
            border-collapse: collapse; /* 셀 간의 간격을 제거하여 하나의 테두리처럼 보이게 함 */
        }
        /* 표 머리글(th)와 데이터 셀(td)의 스타일을 정의 */
        th, td {
            border: 1px solid black; /* 각 셀에 검은색 테두리 설정 */
            padding: 10px; /* 셀 내부 여백 설정 */
            text-align: center; /* 셀 내의 텍스트를 중앙 정렬 */
        }
        /* 표 머리글(th) 셀의 스타일을 정의 */
        th {
            background-color: #f2f2f2; /* 머리글 셀의 배경색을 연회색으로 설정 */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>제목 1</th>
                <th>제목 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>내용 1</td>
                <td>내용 2</td>
            </tr>
            <tr>
                <td>내용 3</td>
                <td>내용 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>바닥글 1</td>
                <td>바닥글 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

웹 접근성 고려🍀

웹 접근성은 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 보장하는 것을 의미합니다. 장애를 가진 사용자, 고령자, 기술적으로 약한 사용자 등 모든 사용자가 웹 콘텐츠를 이해하고 상호 작용할 수 있어야 합니다. 특히, 표와 관련된 웹 접근성은 다음과 같은 속성과 태그를 활용하여 보장될 수 있습니다.

의미 있는 태그 사용
<table>, <caption>, <thead>, <tbody>, <tfoot>, <th>, <td>와 같은 의미 있는 HTML 태그를 사용하여 표의 구조를 명확히 정의합니다.
테이블 요약
<caption> 태그를 사용하여 표의 요약 정보를 제공합니다. 이는 화면 판독기 사용자에게 표의 내용을 이해하는 데 도움이 됩니다.
테이블 머리글과 바닥글
<thead>와 <tfoot> 태그를 사용하여 표의 머리글과 바닥글을 정의합니다. 이는 화면 판독기 사용자에게 표의 구조를 이해하는 데 도움이 됩니다.
헤더와 셀 연결
<th> 태그에 scope 속성을 사용하여 헤더와 셀을 연결합니다. 이는 화면 판독기 사용자에게 표의 각 셀과 헤더의 관계를 명확히 합니다.

<caption> 태그

<caption> 태그는 표의 제목이나 설명을 제공하는 데 사용됩니다. 이는 화면 읽기 소프트웨어를 사용하는 사람들에게 표의 콘텐츠를 이해하는 데 도움이 됩니다.

<table>
  <caption>Monthly Expenses</caption>
  <tr>
    <th>Category</th>
    <th>Expense</th>
  </tr>
  <tr>
    <td>Food</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Transportation</td>
    <td>$100</td>
  </tr>
</table>

위의 예제에서 <caption> 태그는 "Monthly Expenses"라는 표의제목을 나타냅니다. 이러한 제목은 시각적으로 표시되지 않지만, 화면 읽기 소프트웨어를 사용하는 사람들은 이를 통해 표의 내용을 이해할 수 있습니다.

scope 속성

scope 속성은 <th> 요소에 사용되며, 해당 머리글이 어느 부분에 해당하는지를 지정합니다. 이는 화면 읽기 프로그램에게 표의 구조를 설명하고 이해하는 데 도움이 됩니다.

scope = "row": 머리글이 현재 행에 해당함을 나타냅니다.
scope = "col": 머리글이 현재 열에 해당함을 나타냅니다.
scope = "rowgroup": 머리글이 현재 행 그룹에 해당함을 나타냅니다.
scope = "colgroup": 머리글이 현재 열 그룹에 해당함을 나타냅니다.

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$100</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$80</td>
    </tr>
  </tbody>
</table>

위의 예제에서, 첫 번째 <th> 요소에는 scope="col" 속성이 지정되어 있으므로 "Month"와 "Savings"는 열의 머리글임을 나타냅니다. 두 번째와 세 번째 <th> 요소에는 각각 scope="row" 속성이 지정되어 있으므로 "January"과 "February"는 각각 행의 머리글임을 나타냅니다. 이렇게 scope 속성을 사용하면 표의 구조를 명확하게 설명하여 접근성을 높일 수 있습니다.

핵심 내용👀