![[2021/12/10]국비지원-HTML5 코딩툴 기본학습 4-(1) table](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsztXb%2FbtrodluMQEq%2FvWEosRdZGnDUmxU9iL2cFk%2Fimg.png)
표 작성 태그 table
table
- thead
- tfoot
- tbody
- th / td
머리 = 구분영역
발 = 합계
몸통 = 합계 내기 전 내용
거기에 보너스
CSS 맛뵈기로 배움 : STYLE
<style>
th,td{border:1px solid black}
td{width: 100px;height: 100px;text-align: center;}
</style>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table 표 - 웹접근성</title>
<style>
th,td{border:1px solid black}
</style>
</head>
<body>
<table summary = "5개 투자회사별 매매수량, 매도수량에 대한 통계">
<caption>코스닥선물 투자자별 매매동향</caption>
<thead>
<tr>
<th rowspan="2">구분</th>
<th colspan="3">매매수량</th>
<th colspan="3">매도수량</th>
<th rowspan="2">합계</th>
<th rowspan="2">순매수</th>
</tr>
<tr>
<th>신규</th>
<th>환매</th>
<th>소계</th>
<th>신규</th>
<th>환매</th>
<th>소계</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">합계</th>
<td>47</td>
<td>90</td>
<td>137</td>
<td>6</td>
<td>42</td>
<td>48</td>
<td>250</td>
<td>24</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">선물회사</th>
<td>47</td>
<td>6</td>
<td>53</td>
<td>6</td>
<td>42</td>
<td>48</td>
<td>101</td>
<td>5</td>
</tr>
<tr>
<th scope="row">증권회사</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th scope="row">은행</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th scope="row">투자신탁</th>
<td>0</td>
<td>84</td>
<td>84</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>149</td>
<td>19</td>
</tr>
<tr>
<th scope="row">보험회사</th>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>