406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.

Presentation on theme: "406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18."— Presentation transcript:

1 406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18 시간 - 강의방법 : 강의식, 대화식, 모듐학습

2 407 1.1 표의 기초  웹 문서에서 표는 내용을 일목요연하고 간결하게 표현하거나 이미지의 위치를 배치할 때 유용하게 된다  표를 작성할 때는 태그를 사용한다.  실제적인 행과 열은 태그와 태그에 의해 완성된다. (1) 표의 기본 작성법 1 절. 표의 작성

3 408 기본 표 작성 정보 통신 수강 현황 상반기 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

4 409  태그를 이용해 표를 작성한 모습  상위 행의 개수와 현재 행의 개수가 다를 경우 셀이 비정상적으로 표시됨

5 410  태그에선 기본적으로 ‘border’ 속성이 적용되며 ‘border’ 속성을 적용하지 않으면 아래와 같이 선이 표시되지 않는다.

6 411 (2) 표의 크기  표 전체의 크기는 태그 안에서 지정한다.

7 412 표의 크기 정보 통신 수강 현황 상반기 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

8 413

9 414 셀의 크기 정보 통신 수강 현황 상반기 <td width=“70”> 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

10 415

11 416 1.2 표의 서식 (1) 표 테두리 두께  ‘border’ 속성은 표의 테두리 선을 의미함  숫자 인수를 이용한 선의 굵기 설정이 가능  ‘border’ 의 기본 인수 값은 ‘1’  표 전체 테두리에 적용하며, 일부 셀에만 별도로 적용할 수 있다.

12 417 표 테두리 굵기 정보 통신 수강 현황 상반기 <td width=70> 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

13 418

14 419 (2) 표 전체 색상 테두리 표 테두리 굵기 정보 통신 수강 현황 상반기 <td width=70> 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

15 420

16 421 (3) 표의 부분 색상 테두리 표 테두리 굵기 정보 통신 수강 현황 상반기 <td width=70> 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

17 422

18 423 (4) 셀 색상 채우기 표 테두리 굵기 정보 통신 수강 현황 상반기 <td width=70> 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

19 424

20 425 (5) 표 배경 이미지 채우기 표 배경 이미지 채우기 정보 통신 수강 현황 <table border=“10” width=“50%” height=“150” background= “image\antenna.jpg”> 상반기 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

21 426

22 427 1.3 표의 편집  태그에서 셀 테두리와 내용과의 여백을 설정하거나, 셀 테두리 선의 간격을 설정할 수 있다. (1) 셀 여백  표의 크기를 설정하지 않고 셀의 여백 또한 설정돼있지 않을 경우 내용의 분량에 따라 표의 크기가 결정됨  “cellpadding” 속성을 이용해 셀 내부의 내용과 테두리 선과의 여백을 설정할 수 있음

23 428 셀의 여백 정보 통신 수강 현황 상반기 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

24 429  셀 내부 내용과 테두리 선과의 여백을 설정

25 430 (2) 셀 테두리 간격  표를 표현할 때에는 기본적으로 테두리 선이 이중으로 표현된다.  “cellpadding” 속성을 이용하여 표를 표현하는 테두리선의 간격을 표현할 수 있다.

26 431 (3) 표와 셀 내용 정렬  표와 셀 내용을 정렬 할 때에는 태그와 태그에 “align” 속성을 이용하여 내용을 원하는 위치로 정렬한다. 셀의 여백 정보 통신 수강 현황 상반기 하반기 합계 일반과정 125 176 301 실무과정 84 103 187

27 432

28 433 (4) 셀 합치기  행 또는 열 단위로 셀을 합칠 수 있다.  합쳐진 행과 열 사이에서는 태그의 수를 더 적게 표현한다.

29 434 셀 합치기 정보 통신 수강 현황 구분 수강인원 합계 상반기 하반기 일반과정 125 176 301 실무과정 84 103 187 수강인원합계 488

30 435

31 436 (5) 표 안에 표 넣기 표안에 표 정보 통신 수강 현황 학기 구분 총합계 정보통신과 학기구분 1 학기 2 학기 일반과정 125 176 157 105 실무과정 84 103 187 124 1061

32 437  태그에 새로운 태그를 작성 후 태그로 종료하면 해당 셀 안에 또 다른 표를 표시할 수 있다.

33 438 1.Table 의 기본 형태에 대해 말하시오. 2. 표 테두리 두께의 서식에 대해 말하시오. 3. 표 배경 이미지 채우기의 서식에 대해 말하시오. 4. 셀 여백의 태그에 대해 말하시오. 5. 멀티미디어 표현하는 방법에 대해 말하시오. 형성평가