[html5] table

1) 테이블 만들기

 

주제	태그	비고
테이블의 구성요소	<table>	테이블을 만드는 태그
	<th>	테이블의 헤더 부분
	<tr>	테이블의 행
	<td>	테이블의 열

    <table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>

테이블	만들기
첫번째 칸	두번째 칸
첫번째 칸	두번째 칸

 

 

2) 테이블 디자인

 

주제	속성	비고
테이블의 디자인 변경	border	테두리 / 두께
	bordercolor	테두리 / 색상
	width	테이블 가로 크기
	height	테이블 세로 크기
	align	정렬
	bgcolor	배경색
	colspan	가로합병 (열)
	rowspan	세로합병 (행)

<table border="1" bordercolor="#088A29" width ="500" height="300" align = "center" >
<!--티스토리에서는 가로길이 설정이 구려서 일단냅둠-->
    <tr align = "center" bgcolor="#BEF781">
	<td>내용</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>월급!</td>
	<td>1,000,000</td>
	<td></td>
    </tr>
    <tr>
	<td>점심값</td>
	<td></td>
	<td>5,000</td>
    </tr>
    <tr>
	<td>부모님선물</td>
	<td></td>
	<td>30,000</td>
    </tr>
    <tr>
	<td rowspan="3" align = "center" bgcolor="#BEF781">총계</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>1,000,000</td>
	<td>35,000</td>	
    </tr>
    <tr>
	<td>남은돈</td>
	<td>965,000</td>	
    </tr>
</table>

 

내용	수입	지출
월급!	1,000,000
점심값		5,000
부모님선물		30,000
총계	수입	지출
	1,000,000	35,000
	남은돈	965,000