HTML_JS(Sol)
210507_1(HTML태그연습)
너굴셉
2021. 5. 7. 12:11
경로
절대경로 : 웹루트부터 표시하는 법 /webroot/~~~/
상대경로 : 현재 작성 문서로부터 위치를 표시 : 표시가없거나(현재), ./(현재) , ../(상위)
물리적경로 : C:\java_bigdata\mywork_jsp\htmlstudy\WebContent\testfile.html 윈도우일때
물리적(드라이브부터)
가상경로 : 웹경로...
테이블만들기
기본적인 테이블작성법
<table>
<tr>줄
<td>칸</td>
</tr>
</table>
------------------
<table boder='1'> 테두리주기
태그는 반드시 <td>에 줄것
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>테이블(표) 다루기</title>
</head>
<body>
테이블(표) 다루기 3행 3열짜리 테이블만들기<br>
<table border='1'>
<tr>
<!-- width는 첫행에만 주면된다 -->
<!-- height는 첫열에만 주면된다 -->
<td width="200" height="300">1</td>
<td width="200">2</td>
<td width="200">3</td>
</tr>
<tr>
<td height="300">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td height="300">7</td>
<td>8</td>
<td>9</td>
</tr>
</table><br>
</body>
</html>
데이터정렬
align="right"
align="center"
align="left" <!-- 왼쪽 가운데 오른쪽 정렬 -->
valign="top"
valign="middle"
valign="bottom" <!-- 위 중앙 아래 정렬 -->
테이블 내부 데이터 정렬하기.
tr태그에는 속성이없다. 항상 td에 적용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
테이블 내부 데이터 정렬하기.<br>
tr태그에는 속성이없다. 항상 td에 적용한다.<br>
<table border='1'>
<tr>
<!-- width는 첫행에만 주면된다 -->
<!-- height는 첫열에만 주면된다 -->
<td width="50" height="60" align="left">1</td>
<td width="50" align="center">2</td>
<td width="50" align="right">3</td>
</tr>
<tr>
<td height="60" valign="top">4</td>
<td valign="middle">5</td>
<td valign="bottom">6</td>
</tr>
<tr>
<td height="60" align='left' valign='top'>7</td>
<td align="center" valign="middle">8</td>
<td align="right" valign="bottom">9</td>
</tr>
</table>
</body>
</html>
열합치기 행합치기
colspan = "합칠칸수" <!-- 열 -->
rowspan ="합칠칸수" <!-- 행 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border='1'>
<tr>
셀합치기 행합치기 rowspan, 열합치기 colspan <br>
행이나 열을 합치면 합쳐진 태그는 한개만 표현하고 나머지는 삭제된다.
<td width="200" height="300">1</td>
<td width="200" colspan="2">2 cospan</td>
<!-- <td width="200">3</td> -->
</tr>
<tr>
<td height="300">4</td>
<td width="200" rowspan="2">5 rowspan</td>
<td width="200">6</td>
</tr>
<tr>
<td height="300">7</td>
<!-- <td>8</td> -->
<td>9</td>
</tr>
</table><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border='1' >
<tr>
테이블 내부 색상, 셀색상, 이너테이블<br>
상대적 xx%는 창에 크기에 따라서 테이블 크기도 바뀜<br>
<td width="200" height="300" background="C:\java_bigdata\mywork_jsp\htmlstudy\images\smile.jpg">1</td>
<td width="200" colspan="2" align="center" valign="middle">
<!-- 이너테이블 -->
<table border="1" width="350" height="250">
<tr>
<td width="175">1</td>
<td bgcolor="red">red</td>
</tr>
<tr>
<td bgcolor="blue" width="175">blue</td>
<td>2</td>
</tr>
</table></td>
<!-- <td width="200">3</td> -->
</tr>
<tr>
<td height="300" bgcolor="green">4</td>
<td width="200" rowspan="2">5 rowspan</td>
<td width="200">6</td>
</tr>
<tr>
<td height="300">7</td>
<!-- <td>8</td> -->
<td>9</td>
</tr>
</table><br>
</body>
</html>