테이블 만들기
|
주제 |
태그 |
비고 |
|
테이블의 구성 요소 |
<table> |
테이블을 만드는 태그 |
|
<th> |
테이블의 헤더부분을 만드는 태그 |
|
|
<tr> |
테이블의 행을 만드는 태그 |
|
|
<td> |
테이블의 열을 만드는 태그 |
테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 <table></table>태그가 들어갑니다. 그리고 가장 위에는 <th>라는 테이블 헤더 태그를 사용합니다. Default값은 굵은 글씨체에 가운데 정렬이 기본값입니다. 실질적으로 이 태그는 안쓰는 사람이 훨씬 많습니다. (대부분 <tr>태그를 활용하여 테이블 헤더를 만듭니다. )그 다음은 행을 만드는 태그 <tr>태그가 들어갑니다. 그리고 <tr>태그 안에는 열을 만드는 속성<td>태그가 들어갑니다. 아래 예제를 보시면 바로 이해하실 수 있으실겁니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC> <html> <head> <meta charset="EUC-KR"> <title>초간단 테이블</title> </head> <body> <table border="1"> <th>테이블</th> <th>만들기</th> <tr><!-- 첫번째 줄 시작 --> <td>첫번째 칸</td> <td>두번째 칸</td> </tr><!-- 첫번째 줄 끝 --> <tr><!-- 두번째 줄 시작 --> <td>첫번째 칸</td> <td>두번째 칸</td> </tr><!-- 두번째 줄 끝 --> </table> </body> </html>
테이블 디자인 변경
|
주제 |
속성 |
비고 |
|
테이블 디자인 변경 |
border |
테이블의 테두리 |
|
bordercolor |
테이블의 테두리 색상 |
|
|
width |
테이블 가로 크기 |
|
|
height |
테이블 세로 크기 |
|
|
align |
정렬 |
|
|
bgcolor |
배경색 |
|
|
colspan |
가로 합병(열 합병) |
|
|
rowspan |
세로 합병(행 합병) |
1. border 속성은 테이블의 테두리를 설정해주는 속성입니다. ex (border="1") 숫자가 높을수록 테두리가 두꺼워집니다.
2. bordercolor는 테두리의 색상을 지정하는 속성입니다. ex(bordercolor="blue") default값은 검정색입니다.
3. width와 height는 테이블의 크기를 결정해주는 속성입니다. ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다.
4. align은 테이블안에있는 값들을 정렬시키는 기능을 합니다.
5. bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다.
6. colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다.