HTML 기초, 테이블 응용과 셀 내용 줄 바꾸지 않고 그대로 출력하기 (21번째)

HTML 기초, 테이블 응용과 셀 내용 줄 바꾸지 않고 그대로 출력하기

 

◎ 셀 내용 줄 바꾸지 않고 그대로 출력하기

 

해상도에 따라서 혹은 셀 안에 너무 많은 내용을 기술하면 웹 브라우저가 보기 알맞게 자동으로 줄 바꿈을 합니다. 하지만,

줄 바꿈 없이 나타나게 해야 되는 경우에는 줄 바꿈 금지를 지정할 수 있습니다.

줄이 바뀌지 않고 글자가 그대로 출력되도록 하려면 아래 3가지 방법 중에 하나를 사용하면 됩니다.

 

①. <nobr> 태그를 활용한다.

②. <pre> 태그를 활용한다.

③. <nowrap>를 쓰면 된다.

 

<td>, <th> 태그에 줄 바꿈 금지를 의미하는 'nowrap' 속성을 사용하는 방법을 소개하겠습니다.

예문처럼 지정하면 셀 내에서 줄 바꿈 없이 계속 내용을 보여줍니다.

 

예문)

 

<td nowrap> </td>

<tr nowrap> </tr>

 

 

◎ 테이블을 이용해 화면 분할

 

페이지 전체를 두 개의 행으로 나누는 것은 보편적으로 이용되는 레이아웃 형태의 하나입니다.

테이블에서 실제 화면을 세로로 자르는 역할을 하는 것은 <td> 태그입니다. 두 개로 나누어진 행의 너비를 조절하는 width 속성에 border 속성을 사용하지 않고 width 속성에 값을 비율(%)로 지정합니다. 

 

 

 

◎ 테이블 안에 테이블 만들기

 

테이블 안에 테이블을 넣을 수 있습니다. 홈페이지를 만들다보면 원하는 모양의 페이지를 구성할 때 테이블 안에 테이블이

많이 사용됩니다. 테이블 하나의 셀 안에 또 하나의 테이블을 삽입한다는 개념으로 이해하면 쉽습니다.

<td> 태그 사이에 <table> 태그를 넣어 만들면 됩니다.

 

 

 

tip.

 

주의할 점.

 

주의 할 것은 하나의 테이블이 어디에서 끝나는지를 확실히 알고 있어야 한다는 것.

테이블이 많아지면 어디가 시작이고 어디가 끝인지 구분하기 어려워 집니다. 주석문, 탭 키를 이용해 작성하는게 좋습니다.