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": 행 그룹 헤더를 정의합니다.

<table>
  <thead>
    <tr>
      <th scope="colgroup" colspan="4">강사 개인정보</th>
    </tr>
    <tr>
      <th scope="col">강의 시수 구분</th>
      <th scope="col">이름</th>
      <th scope="col">나이</th>
      <th scope="col">거주지</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="2">보조강사</th>
      <th scope="row">Rosy</th>
      <td>52</td>
      <td>브리즈번</td>
    </tr>
    <tr>
      <th scope="row">ZeeZee</th>
      <td>18</td>
      <td>제주</td>
    </tr>
    <tr>
      <th scope="rowgroup" rowspan="2">주강사</th>
      <th scope="row">Licat</th>
      <td>35</td>
      <td>도쿄</td>
    </tr>
    <tr>
      <th scope="row">Wade</th>
      <td>28</td>
      <td>파리</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="colgroup" colspan="4">강사 개인정보</th>
    </tr>
    <tr>
      <th scope="col">강의 시수 구분</th>
      <th scope="col">이름</th>
      <th scope="col">나이</th>
      <th scope="col">거주지</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="2">보조강사</th>
      <th scope="row">Rosy</th>
      <td>52</td>
      <td>브리즈번</td>
    </tr>
    <tr>
      <th scope="row">ZeeZee</th>
      <td>18</td>
      <td>제주</td>
    </tr>
    <tr>
      <th scope="rowgroup" rowspan="2">주강사</th>
      <th scope="row">Licat</th>
      <td>35</td>
      <td>도쿄</td>
    </tr>
    <tr>
      <th scope="row">Wade</th>
      <td>28</td>
      <td>파리</td>
    </tr>
  </tbody>
</table>

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;
}

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;
}

3.2 colspan, rowspan

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

4. caption 태그

<table>
  <caption>
    설명
  </caption>
  <!-- 생략 -->
</table>

<table>
  <caption>
    설명
  </caption>
  <!-- 생략 -->
</table>

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

5. thead, tbody, tfoot 태그

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

6. colgroup과 col 태그

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

<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>

<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>

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.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. 표 접근성 높이기

caption으로 제목을 제공하여 표가 무엇에 관한 내용인지 스크린 리더 사용자가 바로 알 수 있게 해줍니다.
th 요소와 scope 속성으로 셀의 내용과 셀의 관계를 지정할 수 있습니다.
적절한 표 구조를 사용합니다. (thead, tbody, tfoot)

7.1 id - headers

<table>
  <table>
    <caption>
      서울/제주 월별 날씨
    </caption>
 
    <tr>
      <th id="city">도시</th>
      <th id="jan" colspan="2">1월</th>
      <th id="feb" colspan="2">2월</th>
    </tr>
 
    <tr>
      <th>&nbsp;</th>
      <th id="jan-temp">온도</th>
      <th id="jan-humid">습도</th>
      <th id="feb-temp">온도</th>
      <th id="feb-humid">습도</th>
    </tr>
 
    <tr>
      <th id="seoul">서울</th>
      <td headers="seoul jan jan-temp">-2°C</td>
      <td headers="seoul jan jan-humid">45%</td>
      <td headers="seoul feb feb-temp">3°C</td>
      <td headers="seoul feb feb-humid">50%</td>
    </tr>
 
    <tr>
      <th id="jeju">제주</th>
      <td headers="jeju jan jan-temp">5°C</td>
      <td headers="jeju jan jan-humid">70%</td>
      <td headers="jeju feb feb-temp">8°C</td>
      <td headers="jeju feb feb-humid">65%</td>
    </tr>
  </table>
</table>

<table>
  <table>
    <caption>
      서울/제주 월별 날씨
    </caption>
 
    <tr>
      <th id="city">도시</th>
      <th id="jan" colspan="2">1월</th>
      <th id="feb" colspan="2">2월</th>
    </tr>
 
    <tr>
      <th>&nbsp;</th>
      <th id="jan-temp">온도</th>
      <th id="jan-humid">습도</th>
      <th id="feb-temp">온도</th>
      <th id="feb-humid">습도</th>
    </tr>
 
    <tr>
      <th id="seoul">서울</th>
      <td headers="seoul jan jan-temp">-2°C</td>
      <td headers="seoul jan jan-humid">45%</td>
      <td headers="seoul feb feb-temp">3°C</td>
      <td headers="seoul feb feb-humid">50%</td>
    </tr>
 
    <tr>
      <th id="jeju">제주</th>
      <td headers="jeju jan jan-temp">5°C</td>
      <td headers="jeju jan jan-humid">70%</td>
      <td headers="jeju feb feb-temp">8°C</td>
      <td headers="jeju feb feb-humid">65%</td>
    </tr>
  </table>
</table>

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;
}

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;
}

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

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

테이블 예제 살펴보기

OP.GG

HTML/CSS 에센셜

표(table)