| |
|
 |
| |
 |
①
표의 시작과 끝에 사용합니다.
표의 시작 지점과 끝점을 나타내며 반드시 사용하여야 합니다. |
| |
|
② BORDER
를 사용할 때에 표의 테두리 굵기를 정할 때 사용합니다.
| |
|
③ |
표의 제목을 표시해 주는 속성으로써 옵션으로 사용됩니다.
표의 제목을 붙일 위치도 지정할 수 있는데 변수에 top은 표의 제목을 표의 윗부분에 표시하고
bottom은 제목을 표의 아래 부분에 표시해 줍니다.
| |
|
④
| |
표의 한 행을 지정할 때 사용하며 각 행의 시작과 끝에 사용합니다.
|
까지가 하나의 행 즉, 가로로 된 한 줄을 나타낼 때 사용됩니다.
| |
|
⑤
| |
한 열을 만들어 줍니다.
이 태그를 사용했을 때 기본 설정상태에서 보여지는 현상은 각 셀 안의 글자가 왼쪽에 정렬되고,
글씨 두께는 일반 두께로 보이죠.
| |
|
⑥
| |
| 처럼 셀 내에 들어갈 내용을 적어줄 때 사용합니다.
| 를 사용하면 셀 내의 글자는 웹 브라우저 상에서 봤을 때 처럼 굵게 나타납니다.
또한, 셀 내의 내용은 가운데 정렬이 됩니다. |
| |
 |
| |
| |
|
bgcolor
테이블의 배경색을 지정합니다.
테이블 전체의 색상을 바꿀 수도 있고, 셀 내의 색상도 임의로 바꿀 수 있죠. |
| |
|
Background
테이블의 배경이미지를 지정합니다.
테이블 전체의 이미지를 깔아 줄 수도 있고, 셀 내의 이미지를 임의로 바꿀 수도 있죠. |
| |
|
Width
테이블의 가로길이를 지정합니다. 이 태그는 표의 폭 크기를 정의하는 속성으로 이 속성의 변수를
나타내는 방법은 픽셀 값으로 나타내는 방법과 화면에 대한 비율 즉 %로 나타내는 방법이 있습니다. |
| |
|
Align
테이블을 정렬시킬 때 사용됩니다. 정렬을 위해 사용되는 변수에는 left, right, center입니다.
이 속성을 사용하지 않은 경우 나타나는 기본값은 left입니다. | |
| |
 |
| |
 |
| |
| |
|
① colspan
가로로 여러 칸의 셀을 합칠 수 있습니다.
합쳐질 셀의 수를 변수로 사용하게 됩니다. |
| |
|
② rowspan
세로로 여러 줄의 셀을 합칠 수 있습니다.
합쳐질 셀의 수를 변수로 사용합니다. |
| |
|
③ Cellspacing
셀들의 간격을 지정합니다.
이 속성은 내부 경계선의 굵기를 지정하는 속성이며 이 속성의 변수 값도 픽셀 값 입니다.
기본값은 2로 설정되어 있어서 이 값을 사용하지 않는 경우 내부 경계선의 굵기는 2픽셀이 됩니다.
테이블의 내부 경계선에 제어를 위해서는 cellspacing을 사용해야 합니다. |
| |
|
④ Cellpadding
셀의 테두리와 셀 안의 내용물과의 여백을 지정합니다.
즉 셀 내부에 입력된 텍스트 또는 이미지 등의 내용물과의 경계선간의 간격을 조정할 수 있습니다. |
| |
|
⑤ valign
셀 내부 내용을 상하 방향에 대해서도 정렬할 필요가 있을 때 사용합니다.
변수 값으로 top, bottom, middle이 있습니다. 기본값은 middle, 즉 셀에 들어가는 내용이 셀 중간에
나타나게 됩니다. | |
| |
 |
| |
| |
|
① 기본 테이블
|
| |
|
② colspan=“3” 적용
|
| |
|
③ rowspan=“3” 적용
 |
| |
|
④ cellspacing=“15” 적용
 |
| |
|
| ① 기본 테이블 |
② colspan=“3” |
③ rowspan=“3” |
④ cellspacing=“15” |
 |
 |
 |
 | | |
| |
 |
| |
 |
| |
| |
|
5줄 5칸짜리의 테이블을 만드 후 두 번째 줄부터 다섯 번째 칸은 아래로 모두
합쳐줍니다. 배경그림을 넣고 표에 텍스트를 써서 표를 꾸며보세요. | |
| |
| |
|
|
|
|
| |
 |
다음과 같은 기본 테그 구조를 메모장에 입력합니다. |
|
| |
| |
| |
|
|
|
|
| |
 |
Body 태그 사이에 다음 조건과 같은 테이블을 만듭니다.
border=“1” , width가 700, background 이미지로 bg.gif 사용, 중간 정렬 |
|
|
| |
|
 |
|
| |
| |
| |
|
|
|
|
| |
 |
각 셀의 제목에 해당하는 5칸 짜리
열을 만듭니다. |
|
| |
| |
| |
|
|
|
|
| |
 |
2번째 칸에는 friend1.gif 이미지가 있고 마지막 5번째 칸은 2번째 행부터 5번째 행까지 모두
4개의 행을 세로로 합치기
위하여 rowspan=“4“ 속성이
있는 열을 만듭니다. |
 |
| |
| |
| |
|
|
|
|
| |
 |
예제 폴더에 list.htm 이라고
저장한 후 브라우저에서
불러옵니다. |
|
| |
| |
|
