테이블 기본 구조

 

♡뱅크스토리 입니다.♡

 

표 만들기
html 에서는 표를 작성할땐 테이블이란 표현을 씁니다. 표 만들기는 엑셀이나 msword 처럼 박스를 만들고 가로 선이나 세로 선 설정 하는 것은 같으나, html 문서에서 태그를 이용하여 표를 만들때는 전체 표을 그린 다음 반드시 가로 선 태그를 먼저 그려야 합니다.

 

<table>...</table>

테이블(표)의 시작과 끝을 알리는 태그입니다. 테두리 선의 두께, 선의  색깔, 테이블의 배경색이나 이미지 등을 변경할 수 있는 속성을 지정할수 있습니다.
border= 0, 1, 2,... : 경계(테두리) 선의 두께. 0으로 설정하면 테두리선이 보이지 않습니다.  
bordercolor="색상명" 표 테두리선의 색을 설정합니다.
align="left", "center", "right" : 셀안에 왼쪽, 가운데, 오른쪽 정렬 합니다.
valign="top", "middle", "botto" : 셀안에 상단, 중간, 맨밑으로 정렬 합니다.
width= 100, 200, 230,... : 셀의 넓이를 설정합니다.
height= 10, 20, 30,... : 셀의 높이를 설정합니다.
hspace=100, 200, 300,... : 테이블 좌우의 여백을 설정합니다. 생략하면 0으로.. 표를 여러 개를 그릴경우 나타남.
vspace=100, 200, 300,... : 테이블 상하의 여백을 설정합니다. 생략하면 0으로.. 표를 여러 개를 그릴경우 나타남.
background="이미지 파일명" 표의 배경을 이미지로 설정합니다.
bgcolor="색상명" 표의 배경을 색상으로 설정합니다.
cellspacing="숫자" : 셀과 셀 사이의 간격을 설정합니다.
cellpadding="숫자" : 셀 경계와 셀 안의 내용 사이의 간격을 설정합니다.

 

 

table border 속성의 값을 0, 1, 5, 10, 15  설정

"border="0" 메가뱅크

"border="1" 메가뱅크

"border="5" 메가뱅크

"border="10" 메가뱅크

"border="15" 메가뱅크

 

글씨와 테이블 색상 설정

"border="0" "fontcolor=gold" 메가뱅크

"border="1" "bordercolor=red" 메가뱅크

"border="5" "bordercolor=blue" 메가뱅크

"border="10" "bordercolor=pink" 메가뱅크

"border="15" "bordercolor=black" 메가뱅크

<tr>...</tr>

table row의 약어로 테이블의 가로선(행)을 만드는 태그이다. 즉 이 태그가 삽입될 때마다 행이 바뀝니다.
이 태그 안에는 세로선(열)을 만드는 태그인 <td>태그를 삽입하여 열로 나눕니다.
align= "left", "center", "right" : 행의 내용 상태, 왼쪽, 가운데, 오른쪽 정렬 합니다.
valign= "top", "middle", "botto" : 행의 내용 상태, 상단, 중간, 맨밑으로 정렬 합니다.
height= 10, 20, 30,... : 한 행의 높이를 설정합니다.
bgcolor="색상명" 한 행의 배경을 색상으로 설정합니다.

td= <td>...</td> : table data의 약어로 <tr>로 나뉘어진 행을 열로 나눌 수 있습니다. 이 태그 사이에는 테이블 안에 들어갈 내용을 입력할 수 있습니다.
align="left", "center", "right" : 셀의 내용 정렬 상태를 설정합니다.
valign="top", "middle", "botto" : 셀의 내용 정렬 상태를 행의 높이를 기준으로 설정합니다.
background="이미지 파일명", bgcolor="색상명" : 셀의 배경을 이미지나 색으로 설정합니다.
colspan="숫자" : 두 개 이상의 열을 하나로 병합할 때 사용한다. 즉 좌우로 된 칸을 합칩니다.
rowspan="숫자" : 두 개 이상의 행으로 된 셀을 병합할 때 사용합니다. 상하로된 칸을 합칩니다.
height, width="숫자" : 셀의 높이와 너비를 설정합니다.

메가

뱅크

사이트

 

 

<td>...</td>
table data의 약어로 <tr>로 나뉘어진 행을 열로 나눌 수 있습니다. 이 태그 사이에는 테이블 안에 들어갈 내용을 입력할 수 있습니다.
align="left", "right", "center" : 셀의 내용 정렬 상태를 설정합니다.
valign="top", "bottom", "middle" : 셀의 내용 정렬 상태를 행의 높이를 기준으로 설정합니다.
background="이미지 파일명", bgcolor="색상명" : 셀의 배경을 이미지나 색으로 설정합니다.
colspan="숫자" : 두 개 이상의 열을 하나로 병합할 때 사용한다. 즉 좌우로 된 칸을 합친다.
rowspan="숫자" : 두 개 이상의 행으로 된 셀을 병합할 때 사용합니다. 상하로된 칸을 합칩니다.
height, width="숫자" : 셀의 높이와 너비를 설정합니다.

메가

뱅크

사이트

 

 

<th>...</th>
<td>태그와 같이 세로 선을 삽입할 수 있습니다.
이 태그는 특별히 강조하고 싶은 열이 있을 때 사용합니다.
일반적으로 테이블을 작성한 다음 제목에 해당하는 열을 입력할 때 사용합니다.
사용할 수 있는 속성은 <td>태그의 속성과 동일합니다.
차이점은 <th>를 이용하면 글꼴이 두꺼워지고 자동적으로 가운데 정렬된다는 것입니다.

 

<caption>...</caption>
<table>태그에서만 사용해야 하며, 테이블에 대한 설명이나 제목 등을 넣을 때 사용합니다.
align 속성에서 top, bottom, left, right의 값을 이용해 캡션 내용의 정렬 상태를 설정합니다.

 

테이블을 이용하여 효과주기

금

리

비

교

무

료

사

이

트

메

가

뱅

크

입

니

다

 

 

Explorer 에서 지원하는 옵션 : 테두리의 외곽선이나 셀 사이의 경계선을 숨기거나 나타낼 때 사용합니다.
Frame 속성을 이용하여 외곽선의 형태를 지정하는 것으로 border의 값이 1이상 설정되어 있어야 합니다.

void : 표의 외곽선이 나타나지 않습니다.
border : 기본적인 외곽선이 나타납니다.
above : 바깥쪽의 외곽선 중 위쪽만 나타납니다.
bellow : 바깥쪽의 외곽선 중 아래쪽만 나타납니다.
hsides : 바깥쪽의 외곽선 중 위쪽과 아래만 나타납니다.
lhs : 바깥쪽의 외곽선 중 왼쪽만 나타납니다.
rhs : 바깥쪽의 외곽선 중 오른쪽만 나타납니다.
vsides : 바깥쪽의 외곽선 중 좌우만 나타납니다. rules 속성을 이용하면 셀 사이의 경계선 형태를 설정할 수 있지만, border의 값도 설정되어야 합니다.
cols : 열들 사이의 경계선만 그립니다.
rows : 행들 사이의 경계선만 그립니다.
none : 테두리의 외곽선을 제외한 셀 경계선을 지웁니다.
all : 외곽선과 셀 경계선을 모두 그립니다.

 

 

 

♡뱅크스토리 입니다.♡

 

 

010-7249-0202