테이블
흔히 우리가 표라고도 부른다.
사용하는 방법은 다음과 같다.
정의
<body>
<table border="<숫자>">->border는 표의 행과 열사이 경계선 긋는다.
<tr>
</tr>
<tr>
</tr>
--><tr></tr>은 열의 추가를 의미한다.
<tr>
<td></td><td></td> -><td></td>는 행의 추가를 의미한다.
<th></th> -굵은글씨 행의 추가이다.
</tr>
<table>
</body>
예제
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>1행 1열</td><td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td><td>2행 2열</td>
</tr>
<tr>
<th>3행 1열</th><td>3행 3열</td>
</tr>
</table>
</body>
</html>
결과
병합
정의
column 병합은 colspan="<숫자>"
row의 병합은 rowspan="<숫자>"을 이용 th,td에만 적용한다.
<tr>
<td width="100" colspan="2">1행 1열->두행을 합쳐주겠다.
</tr>
예제
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">1행 1열과 2행1열</td><td>1행 2열</td>
</tr>
<tr>
<td>2행 2열</td>
</tr>
<tr>
<th colspan="2">3행 1열과 3행 2열</td>
</tr>
</table>
</body>
</html>
결과
css사용하기
헤드쪽에 명시를 해준다.
정의
<head>
<style>
th{color:red;}
h1 {color : blue ;}
</style>
</head>
예제
<html>
<head>
<style>
th{color:orange;font-size:50pt;}
blue{color:blue;}
</style>
</head>
<body>
<table border="1">
<th>hi</th><br>
<blue>blue~</blue>
</body>
</html>
결과
css class,css id,css inline 사용하기
정의
* class
<head>
<style>
.<class명>{옵션}
</style>
</head>
* id
<head>
<style>
#<id명>{옵션}
</style>
</head>
* 인라인으로 사용하기
<body>
<css 옵션></css>
</body>
예제
<html>
<head>
<style>
.classex{font-size:30pt;color:red;}
#id{text-align:center;color:blue;}
h1{color:orange;font-size:50pt;}
</style>
</head>
<body>
<p id="id">아이디입니다.</p>
<p class="classex">클래스입니다.</p>
<h1 style=color:green> 인라인입니다. </h1>
</body>
</html>
결과
'언어 > jsp' 카테고리의 다른 글
| jsp 프로그래밍 (0) | 2018.02.01 |
|---|---|
| html_종합 (0) | 2018.01.24 |
| UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_ (0) | 2018.01.24 |
| http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_ (0) | 2018.01.23 |