표(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> </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> </td> <td> </td> <td> </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> </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> </td> <td> </td> <td> </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 StandardHTML Symbols, Entities, Characters and Codes — HTML Arrows