표(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)로 구성할 때 사용.
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