표의 행과 열을 합치는 속성
•
셀(th, td) 태그의 속성을 이용해서 행 또는 열을 합칠 수 있음
◦
colspan="2" : 2개의 열을 합치기
◦
rowspan="2" : 2개의 행을 합치기
<h3>이력서</h3>
<table border="1">
<tr>
<td colspan="2" rowspan="2" width="130" height="130">사진</td>
<td width="80">이름</td>
<td width="200"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="130">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
HTML
복사
결과물!
테이블 내에 구조 나누기
•
<thead>, <tbody>, <tfoot> 으로 나눌 수 있음
•
테이블 내에 스타일 바꾸기
1.
<head> 안에 <style>을 만든다.
2.
원하는 영역 지정 후 (ex. theda, tbody, h1, ... ) {background-color :로 배경색과 color : 로 글자색을 지정가능하다.
3.
원하는 영역 id를 지정해 #id{}로 변경할 수도 있다.
<head>
<title>표 관련 태그</title>
<style>
/* css 영역의 주석 */
#tt{
background-color: lightgrey;
}
thead{
background-color: magenta;
color: white;
}
tfoot{
background-color: darkgreen;
color: yellow;
}
h2{
color:pink;
}
h1{
color:lightblue
}
</style>
</head>
<body>
<h2>테이블내에 구조 나누기</h2>
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody id="tt">
<tr>
<td>홍길동</td>
<td>23</td>
<td>서울</td>
</tr>
<tr>
<td>김말똥</td>
<td>30</td>
<td>부산</td>
</tr>
<tr>
<td>김개순</td>
<td>25</td>
<td>광주</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">총 인원</th>
<td>3명</td>
</tr>
</tfoot>
</table>
</body>
HTML
복사
결과물 !!
