14. 테이블 작성하기(5-2)

1. 테이블로 웹 문서의 레이아웃 설정 

개요 

• 페이지를 만들기 전에 어느 부분에 어떤 내용을 넣을 것인지 설계하고 그런 내용들이 적당한 위치에 흐트러지지 않고 가

지런히 정돈되어서 배치되도록 표로 레이아웃을 설계합니다.  

테이블의 기본 구조

• 테이블 생성 

– 테이블 선언만 할 경우 테이블은 보이지 않는다. 

– 셀을 생성하지 않으면 테이블은 눈에 보이지 않는다. 

셀 만들기   

– <tr> “Table Row”의 약어 

• 테이블 내에 행을 정의하는 태그 

• 새로운 행이 생성 

– <td> “Table Data”의 약어 

• 각 행의 셀(cell)을 만들 때 사용 

• <tr>태그로 행을 정의한 후 <td> 태그로 셀을 만들어 내용 기술 

– 테이블 생성만 했을 경우와 다름 

– 셀(행과 열) 생성 시 테이블 외곽선이 나타남 

 

테이블에 테두리 표시와 빈 셀 작성 

– <table> 태그로 테이블 작성하면 테두리가 표시되지 않음 

– border 옵션 

• border=정수 (ex. Border=2) 

• 정수가 클 수록 선은 테두리는 두껍게 표시 

• 공백문자(&nbsp;) : 빈 셀을 만들기 위해 사용 

빈 셀 작성하기  

– 빈 셀을 작성하기 위해서는 공백 문자(&nbsp) 필요 

– 스페이스바는 문자로 인식하지 못함 

• <td>스페이스바</td> 셀 생성되지 않음 

• <td>&nbsp</td> 빈 셀 생성 

테이블 안에 이미지 삽입 (1행) 

– 셀 생성 후 셀 안에 이미지 삽입 

– <td><img src=“이미지 파일명”></td> 

 

– 실행 예 

<table> 

<tr> 

<td><img src=“image\image01.jpg></td> 

</tr> 

</table>