Ch5 테이블
테이블의 형식
<table>
<caption>제목</caption>
<tr><th></th><th></th></tr> th:헤더
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table>
<caption>제목</caption>
<thead><th></th><th></th></thead>
<tbody><td></td><td></td></tbody>
<tfoot><td></td><td></td></tfoot>
</table>
row: 행
col: 열
table 속성 tr속성 td속성
-------------------------------------------------------------------------------
align="정렬방식" align="수평정렬" align="수평정렬"
border="숫자" valign="수직정렬" valign="수직정렬"
width="숫자" width="숫자" width="숫자"
height="숫자" height="숫자" height="숫자"
cellpadding="숫자" 셀테두리와 셀내용 사이의 간격
cellspacing="숫자" 각 셀간의 간격
background="경로" background="경로" background="경로"
bgcolor="색상" bgcolor="색상" bgcolor="색상"
rowspan="숫자" 세로방향 병합 셀의 개수
colspan="숫자" 가로방향 병합 셀의 개수
border="숫자" 테이블선 굵기
달력만들기
<table border="1">
<caption>5월 달력</caption>
<tr>
<th><font color="red">일</font></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>
</tr>
<tr>
<th><font color="red">1</font></th><th>2</th><th>3</th><th>4</th><th><font color="red">5</font></th><th>6</th><th>7</th>
</tr>
<tr>
<th><font color="red">8</font></th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
</tr>
<tr>
<th><font color="red">15</font></th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th>
</tr>
<tr>
<th><font color="red">22</font></th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th>
</tr>
<tr>
<th><font color="red">29</font></th><th>30</th><th>31</th><th><font color="red">1</font></th><th>2</th><th>3</th><th>4</th>
</tr>
</table>
표 만들기
<body align="center" bgcolor="#FFE4E1 ">
<h1>표 만들기</h1>
<hr width="500" size="5" color="#F8F8FF">
<table border="1" align="center" bgcolor="#FFFAFA" width="50%" height="50%">
<caption>제목</caption>
<thead>
<tr><th width="200">이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tbody>
<tr><td>홍길동</td><td>80</td><td>70</td></tr>
<tr><td>이순신</td><td>95</td><td>99</td></tr>
<tr><td>강감찬</td><td>100</td><td>70</td>
</tbody>
<tfoot>
<tr><th height="50">합계</th><th>225</th><th>230</th></tr>
</tfoot>
</thead>
</table>
표에 그림 삽입
<table background="img/11.png" align="center" border="3"
width="500px" height="400"
cellpadding="5" cellspacing="30">
<tr>
<th><img src="img/kuromi/7.jpg" width="150"></th><th>중간</th><th>기말</th><t>성적</th>
</tr>
<tr>
<th>국어</th><td>100</td><td>50</td><td>150</td>
</tr>
<tr>
<th>수학</th><td>84</td><td>95</td><td>179</td>
</tr>
</table>
표 정렬
<h1>수평정렬 align, 수직정렬 valign</h1>
<hr>
<table background="img/11.png" align="center" border="1"
width="500px" height="400"
cellpadding="5" cellspacing="5">
<tr>
<th></th><th align="right">중간</th><th align="right">기말</th><th align="right">성적</th>
</tr>
<tr>
<th align="right">국어</th><td align="left" valign="top">100</td><td align=left>50</td><td align=center>150</td>
</tr>
<tr>
<th>수학</th><td align="left">84</td><td align="left" valign="bottom">95</td><td align=left>179</td>
</tr>
</table>
표에 그림 삽입 (격자 이미지)
<table width="500" height="100%" align="center" cellspacing="5" bgcolor="#F5F5F5">
<caption><h1><b>쿠로미♡</b></h1></caption>
<br>
<tbody>
<tr>
<td><img src="img/kuromi/5.jpg" width="200" height="100%" alt="쿠로미"></td>
<td><img src="img/kuromi/6.jpg" width="200" height="100%" alt="쿠로미"></td>
<td><img src="img/kuromi/7.jpg" width="200" height="100%" alt="쿠로미"></td>
</tr>
</tbody>
</table>
표에 그림 삽입 (과일 가격표)
<table width="500" height="100%" align="center" cellspacing="5" bgcolor="#F5F5F5">
<caption><h1><b>과일 가격표 ☺</b></h1></caption>
<br>
<tbody>
<tr align="center">
<td>망고</td><td>딸기</td><td>파인애플</td>
</tr>
<tr>
<td><img src="img/mango.png" width="200" height="100%" alt="망고"></td>
<td><img src="img/straw.jpg" width="200" height="100%" alt="딸기"></td>
<td><img src="img/pine.jpg" width="200" height="100%" alt="파인애플"></td>
</tr>
<tr align="center">
<td>3000원</td><td>2000원</td><td>2500원</td>
</tr>
</tbody>
</table>
셀 병합 실습
<font size="5">
<table border="1" align="center" width="500" height="300"
bgcolor="#FFF5EE">
<tr align="center"></b><td rowspan="3">A</td><td colspan="2">B</td>
</tr>
<tr align="center"><td rowspan="2">C</td><td>D</td>
</tr>
<tr align="center"><td>E</td>
</tr>
<tr align="center"><td colspan="3">F</td>
</tr>
</table>
</font>