2
장 드림위버 활용
sec-2
테이블 태그 활용
Part2-2
테이블 기능 및 문서 레이아
웃 이해
1. HTML 표 (Table)
지정 태그
테이블 (Table) : 행 (row)
와 열 (coloum)
으로 구성
표 정의 : <table> ~ </table> 태그로 정의
행 (Row)
<tr> ~ </tr> 태그로 생성
다수의 데이터 셀로 구성
<td> ~ </td>
로 생성 ( td : table data)
텍스트 , 링크 , 이미지 , 폼 , 또는 다른 테이블 포함 가능
예 :
<table border="1">
< tr>
< td> 1
행 ,
첫번째 셀
</td>
< td> 1
행 ,
두번째 셀
</td>
< /tr>
< tr>
< td> 2
행 ,
첫번째 셀
</td>
< td> 2
행 ,
두번째 셀
</td>
< /tr>
< /table>
실습 : table-01.htm
1. HTML 표 (Table)
지정 태그
관련 태그
태그
설 명
<table>
표 정의
<th>
표 내의 헤더 ( 제목 )
셀 정의
<tr>
표 내 행 (row) 정의
<td>
표 내에 데이터 셀 정의
<cap-tion>
표 캡션 정의
<col-group>
표 서식 지정을 위해 하나 이상 열 (column)
그룹 지정
<col>
<colgroup>
요소 내 각 열에 대한 속성 지정
<thead>
표 내 헤더 (header)
내용 그룹
, CSS
와 연계 활용
<tbody>
표 내 바디 (body)
내용 그룹
, CSS
와 연계 활용
<tfoot>
표 내 바닥글 (foot)
헤더 내용 그룹
, CSS
와 연계 활용
표 관련 주요 속성
1)
<table>
태그 관련 속성
속성
속성 값
설명
align
left
center
right
본문 내 표 정렬
bgcolor
rgb(x,x,x)
#rrggbb
컬러명
표 배경색 지정
(x: 0~255, rr: 00~ ff)
border
1
""
표 경계선 두께 지정
cellpadding
픽셀값
셀 내용과 셀 내부 경계와 간격
cellspacing
픽셀값
셀간 간격 정의
width
픽셀값
%
표 넓이 지정
표 관련 주요 속성
2)
<tr>
태그 관련 속성
속성
속성 값
설명
align
right
left
center
justify
char
특정 열 (row)
내용 수평 정렬 지정
bgcolor
rgb(x,x,x)
#rrggbb
컬러명
특정 열 배경색 지정
(x: 0~255, rr: 00~ ff)
valign
top
middle
bottom
baseline
특정 열 내용 수직 정렬 지정
표 관련 주요 속성
3)
<td>
태그 관련 속성
속성
속성 값
설명
align
right
left
center
justify
char
특정 셀 내용 수평 정렬 지정
bgcolor
rgb(x,x,x)
#rrggbb
컬러명
특정 셀 배경색 지정
(x: 0~255, rr: 00~ ff)
valign
top
middle
bottom
baseline
특정 셀 내용 수직 정렬 지정
height
픽셀값
%
특정 셀 높이 지정
width
픽셀값
%
특정 셀 너비 지정
실습
다음 표를 완성하시오
표
캡션 ( 표 예제 )
너비 (300 픽셀 ), 배경색 (ffcc00)
경계선 두계 (3 픽셀 ), 표정렬 ( 가운데 )
셀 패딩 (20 픽셀 )
1 번째 행 : 표 제목
2 번째 행
배경색 (green), 수직정렬 (top)
수평정렬 (right
3 번째 행 1 열
배경색 (white), 셀 높이 (100 픽셀 )
3 번째 행 2 열
수직정렬 (bottom)
실습 : table-02.htm
2.
셀 병합
관련 <td>
태그 속성
속성
속성 값
설명
colspan
숫자값
병합될 셀의 개수 지정
rowspan
숫자값
병합될 행의 개수 지정
셀 병합
행
병
합
colspan=“
2”
rowspan=“2
”
m
셀 병합 예제
<tr> 내
의
<td> 개수
에 유의 할 것
1)
표 삽입
4 x 1 테이블 ( 표 ) 삽입하기
1) Insert 메뉴 Table
1) 행 및 열 개수 지정 2) 표 너비 지정 3) 테두리 두께 지정 4) 셀 안쪽 여백지정 5) 셀 사이 간격 지정 6) 표 제목 줄 / 칸 지정 7) 표 제목 지정2)
표 활용
3) 행 ,
열 편집
열 (column) 삽입
행 (row) 삽입
임의 행 선택 1) [Insert][Table Objects]
셀 병합 (Merge cells)
셀 분리 (split cell)
행으로 나누기
열로 나누기
4)
표 속성 (properties) 변경
표 선택 또는 <table>
태그 선택
너비 / 정렬방식 / 셀 여백 / 셀 간격 / ……
외곽선 두께 (
Border
):
0( 선 없음 )
테이블에 관련된 [PROPERTIES] 패널
1) Table Id : 테이블 이름을 지정합니다 . 입력된 이름은 CSS 의 ID 와 같다 . 2) Rows/Cols : 테이블의 행과 열 수를 지정한다 . 3) W : 테이블의 가로 크기를 지정한다 . 4) CellPad : 셀 안에 삽입한 데이터 주변의 상하좌우 여백을 지정한다 . 5) CellSpace : 셀과 셀 사이의 간격을 지정한다 .. 6) Align : 테이블을 왼쪽 , 중앙 , 오른쪽으로 가로 정렬한다 . 7) Border : 테이블의 테두리 굵기를 지정한다 .. 8) Class : CSS 클래스를 적용한다 .9) [Clear Column Widths] : 테이블에 지정된 가로 크기를 삭제한다 .
10) [Convert Table Widths To Pixels] : 테이블의 가로 크기 단위를 pixels’ ‘ 로 지정한다 . 11) [Convert Table Widths To Percent] : 테이블의 가로 크기 단위를 percent’ ‘ 로 지정한다 . 12) [Clear Row Heigh] : 테이블에 지정된 세로 크기를 삭제한다 .