- 테이블 요소
- 표의 구성 요소
표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.
<table>: 표를 나타내는 태그
<tr>: 행을 나타내는 태그
<th>: 제목 셀을 나타내는 태그
<td>: 셀을 나타내는 태그
- 표의 구성 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>PETER</caption> <!--표의 제목 -->
<thead><!--제목 행을 그룹화-->
<tr>
<th>Today</th>
<th>I sold</th>
</tr>
</thead>
<tbody><!-- 행을 그룹화-->
<tr>
<td>Pants</td>
<td>$100</td>
</tr>
<tr>
<td>Shirts</td>
<td>$80</td>
</tr>
</tbody>
<tfoot><!--바닥 행을 그룹화-->
<tr>
<td>Shoes</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td{border: 1px solid; width: 50px; height: 50px;}
</style>
</head>
<body>
<table>
<caption>PETER</caption> <!--표의 제목 -->
<thead><!--제목 행을 그룹화-->
<tr>
<th>Today</th>
<th>I sold</th>
</tr>
</thead>
<tbody><!-- 행을 그룹화-->
<tr>
<td>Pants</td>
<td>$100</td>
</tr>
<tr>
<td>Shirts</td>
<td>$80</td>
</tr>
<tr>
<td>Shoes</td>
<td>$180</td>
</tr>
<tr>
<td>Braclet</td>
<td rowspan="2">$300</td>
</tr>
<tr>
<td>Neckless</td>
</tr>
</tbody>
<tfoot><!--바닥 행을 그룹화-->
<tr>
<td colspan="2">SUM</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
th, td{border: 2px solid; width: 50px; height: 20px;}
</style>
</head>
<body>
<table>
<caption>Specification Values</caption>
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th colspan="2">Strength.</th>
<th rowspan="2">Percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>lb/in</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
※추가공부
<colgroup>
<col> 태그란?
<colgroup> 요소에 속하는 각 열(column)의 속성을 정의할 때 사용합니다.
<col> 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column)마다 각각 다른 스타일을 적용하고 싶을 때 유용하게 사용할 수 있습니다.
<table border="1">
<colgroup>
<col width="50px" style="background: ivory" />
<col width="200px" style="background: ivory" />
<col width="100px" style="background: ivory" />
</colgroup>
<thead>
<tr>
<td>번호</td>
<td>신청자이름</td>
<td>비고</td>
</tr>
</thead>
</table>
scope 속성
시각장애인들은 눈으로 보기 힘들기 때문에 스크린리더기라는 프로그램을 사용하여 오직 귀로만 테이블 정보를 얻어야한다.
따라서 table에 scope="col" /"row" 를 작성하여 table 데이털르 인식하고 읽는 순서를 결정.
header 속성
꼭 웹 퍼플리셔가 될거에요