HTML/CSS 에센셜

표(table)

1. `<table>`

테이블을 생성할 때 사용하며 테이블 데이터의 컨테이너 요소입니다.

<table></table>

<table></table>

1.1 `<table>` 사전실습

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Table 태그 예제</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      caption {
        caption-side: top;
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>HTML Table 태그 예제</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Table 태그 예제</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      caption {
        caption-side: top;
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>HTML Table 태그 예제</h1>
  </body>
</html>

2. `<tr>`, `<td>`

tr: table row. 테이블의 행
td: table data. 셀 내용

3. `<th>` 태그 및 속성들

th: table header. 테이블의 행, 열의 제목을 나타내는 셀

3.1 scope

scope 속성은 th 태그에 사용하여 헤더가 어떤 셀에 대한 제목셀인지 명확하게 지정합니다.
이를 통해 접근성 도구(스크린 리더 등)가 테이블의 구조를 더 잘 이해할 수 있게 합니다.
쉽게 말해 행의 헤더인지, 열의 헤더인지를 나타내기 위함입니다.
행(row) 또는 열(col), 행그룹(rowgroup), 열그룹(colgroup)의 속성값으로 셀의 범위를 지정합니다
- scope="col": 열 헤더를 정의합니다.
- scope="row": 행 헤더를 정의합니다.
- scope="colgroup": 열 그룹 헤더를 정의합니다.
- scope="rowgroup": 행 그룹 헤더를 정의합니다.

3.2 colspan, rowspan

셀병합 속성입니다. 해당 열이 몇 개의 칸을 차지할 것인가를 의미합니다.
colspan: 열 병합, rowspan: 행 병합

4. `<caption>`

테이블의 제목이나 설명을 의미합니다.
table의 첫번째 자식으로 사용해야 합니다.
선택적으로 사용하면 됩니다. 필수 요소는 아닙니다
표의 목적에 대한 명확하고 상세한 설명을 포함하는 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.
caption-side : top, bottom 로 위치를 설정 할 수 있습니다.

5. `<thead>`, `<tbody>`, `<tfoot>`

테이블의 머리글, 본문, 바닥글을 의미.
구역을 나누는 요소로 사용.
선택적으로 사용하면 됩니다. 필수 요소는 아닙니다. 코드의 가독성을 위해 명시적으로 사용하면 좋습니다
<thead>: 테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용.
<tbody>: 행 블록 내에 테이블 데이터로 구성할 때 사용.
<tfoot>: 행 블록 내에 열 요약(column summaries)로 구성할 때 사용.

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2024년 1월 달력</title>
    <style></style>
  </head>
  <body>
    <h1>2024년 1월 달력</h1>
 
    <table>
      <caption>
        2024년 1월
      </caption>
 
      <colgroup>
        <col class="weekend" />
        <col span="5" />
        <col class="weekend" />
      </colgroup>
 
      <thead>
        <tr>
          <th scope="col">일</th>
          <th scope="col">월</th>
          <th scope="col">화</th>
          <th scope="col">수</th>
          <th scope="col">목</th>
          <th scope="col">금</th>
          <th scope="col">토</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
        </tr>
        <tr>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
        </tr>
        <tr>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2024년 1월 달력</title>
    <style></style>
  </head>
  <body>
    <h1>2024년 1월 달력</h1>
 
    <table>
      <caption>
        2024년 1월
      </caption>
 
      <colgroup>
        <col class="weekend" />
        <col span="5" />
        <col class="weekend" />
      </colgroup>
 
      <thead>
        <tr>
          <th scope="col">일</th>
          <th scope="col">월</th>
          <th scope="col">화</th>
          <th scope="col">수</th>
          <th scope="col">목</th>
          <th scope="col">금</th>
          <th scope="col">토</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
        </tr>
        <tr>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
        </tr>
        <tr>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
          <td>26</td>
          <td>27</td>
        </tr>
        <tr>
          <td>28</td>
          <td>29</td>
          <td>30</td>
          <td>31</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}
th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
th {
  background-color: #f4f4f4;
}
caption {
  caption-side: top;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 10px;
}
.weekend {
  background-color: whitesmoke;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}
th,
td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
th {
  background-color: #f4f4f4;
}
caption {
  caption-side: top;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 10px;
}
.weekend {
  background-color: whitesmoke;
}

6. `<colgroup>`과 `<col>`

테이블 열 단위 스타일 지정을 위한 태그입니다.

6.1 `<colgroup>`

하나 이상의 테이블 열들의 그룹을 만들고 한꺼번에 스타일을 지정할 때 사용합니다.
<col> 태그를 자식태그로 가집니다.

6.2 `<col>`

테이블 열을 하나 이상 묶을 때 사용합니다.
CSS와 함께 col에 스타일을 지정할 수 있습니다.
span="n" 속성 : 해당 태그의 스타일이 적용되는 열의 개수

<col> <colgroup> 태그와 scope="colgroup" 속성을 헷갈리시면 안됩니다!

<colgroup> 과 <col>은 있는데, <row>와 <rowgroup>은 없는 이유?

HTML 표에서는 행을 나타내는 <tr> 태그가 있으며, 이를 통해 표의 행을 정의할 수 있습니다. 따라서 추가적인 <row>와 <rowgroup> 태그는 불필요합니다. 반면, 열 단위로 스타일링을 하기 위해서는 <col>과 <colgroup> 태그가 필요하기 때문에 이들 태그만 존재합니다.

7. (심화) 표 접근성 높이기

scope, id-headers로 셀의 내용과 셀의 관계를 지정할 수 있습니다.
이런 방법으로 제목과 셀 내용을 함께 읽어주기 때문에 데이터의 의미와 관계를 좀 더 쉽게 파악 할 수 있습니다.

7.1 scope

제목 셀이 명확한 단순한 표에 적용하여 표 구조를 나타냅니다.

7.2 id - headers

셀이 병합된 표거나 내용이 많아 복잡한 경우, 제목 셀이 2줄 이상이 되어 복잡한 경우 해당 속성으로 명확하게 연결하는 것이 좋습니다!

scope 속성과 headers 속성 중 하나만 선택하면 됩니다! 둘다 사용하지 않습니다!

값이 없거나 빈 셀의 경우  (공백) 삽입 또는 ‘없음’ 과 같은 텍스트를 삽입한 후 CSS를 사용하여 숨김처리한다면 접근성을 높일 수 있습니다.

테이블 예제 살펴보기

OP.GG

🙋🏻‍♀️ 실습 TIME

표에 익숙해지기 위해, 구매내역의 항목을 추가해볼까요?

Entity Code

HTML Standard HTML Symbols, Entities, Characters and Codes — HTML Arrows

표(table)

1. <table>

1.1 <table> 사전실습

2. <tr>, <td>

3. <th> 태그 및 속성들

3.1 scope

3.2 colspan, rowspan

4. <caption>

5. <thead>, <tbody>, <tfoot>

6. <colgroup>과 <col>

6.1 <colgroup>

6.2 <col>

7. (심화) 표 접근성 높이기

7.1 scope

7.2 id - headers

1. `<table>`

1.1 `<table>` 사전실습

2. `<tr>`, `<td>`

3. `<th>` 태그 및 속성들

4. `<caption>`

5. `<thead>`, `<tbody>`, `<tfoot>`

6. `<colgroup>`과 `<col>`

6.1 `<colgroup>`

6.2 `<col>`