html 테이블구조 만들기
html테이블의 기본 구조를 만들때는 테이블이라는 테그와<table></table>왼쪽에서 오른쪽으로 column을 확장하는 경우 colspan, 위에서 아래로 row를 확장하는 경우는 rowspan 이렇게 기본적으로 기억하면서 colspan과 rowspan 속성을 자유자재로 다룰 수 있어야 한다.
본격적으로 테이블 만들기를 해보겠다. 우선 테이블 만들기에 앞서 테이블 속성에 대해선 하단에서 다루기로 하고 테이블의 구조에 대해서만 정의해 보자.
기본구조
<!----------- 테이블기본 구조 시작 ----------->
<table>
<thead>
<tr>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<th ></th>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row"></th>
</tr>
</tfoot>
</table>
<!----------- 테이블기본 구조 끝 ----------->
테이블 구조 만들기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>new document</title>
</head>
<body>
<!----------- 테이블 구조 시작 ----------->
<table border="1" summary="5개 투자회사별 매매수량, 매도수량에 대한 통계"> summary는 테이블 이름
<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 scope="row">신규</th>
<th scope="row">환매</th>
<th scope="row">소계</th>
<th scope="row">신규</th>
<th scope="row">환매</th>
<th scope="row">소계</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">선물회사</th>
<td scope="col">47</td>
<td scope="col">6</td>
<td scope="col">53</td>
<td scope="col">6</td>
<td scope="col">42</td>
<td scope="col">48</td>
<td scope="col">101</td>
<td scope="col">5</td>
</tr>
<tr>
<th scope="row">증권회사</th>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
</tr>
<tr>
<th scope="row">은행</th>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
</tr>
<tr>
<th scope="row">투자신탁</th>
<td scope="col">0</td>
<td scope="col">84</td>
<td scope="col">84</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">149</td>
<td scope="col">19</td>
</tr>
<tr>
<th scope="row">보험회사</th>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
<td scope="col">0</td>
</tr>
</tbody>
계속해서 열을 잘 나열하면서 정의를 하고 마지막에 합계를 만들면 끝.
<tfoot>
<tr>
<th scope="row">합계</th>
<td scope="col">47</td>
<td scope="col">90</td>
<td scope="col">137</td>
<td scope="col">6</td>
<td scope="col">42</td>
<td scope="col">48</td>
<td scope="col">250</td>
<td scope="col">24</td>
</tr>
</tfoot>
</table>
<!----------- 테이블 구조 끝 ----------->
</body>
</html>
참고
테이블의 테두리(border) 색상을 변경할 경우, 테이블 태그를 CSS를 사용하여 색상을 변경할 경우 border-color 속성만 지정해서는 테두리색이 변경이 안된다. 이때는 아래와 같이 border 속성을 사용하여야 한다. 상단에 <head></head>중간에 스타일을 넣어주면 된다.
<head>
<style>
table {
border: 1px solid #000;
}
</style>
※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※
2016/12/29 - [HTML&CSS] - first-child / last-child 활용하기
2016/12/19 - [HTML&CSS] - 폰트 URL 적용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
|---|---|
| div 프레임나누기 (2) | 2017.01.25 |
| div 배치하기 (0) | 2017.01.24 |
| first-child / last-child 활용하기 (0) | 2016.12.29 |
| 폰트 URL 적용하기 (0) | 2016.12.19 |
