5. <TABLE> 태그 -바닥부터 시작하는 HTML-

5. <TABLE> 태그     -바닥부터 시작하는 HTML-

 

 

아주 기본적인 태그들은 태그정리 페이지에서 다룬 것으로 충분한 것 같아서 여기서부터는 중급 정도 수준의(내 기준으로 ^^) 태그부터 다루려고 한다.

<table>태그는 초창기 웹페이지의 레이아웃을 만드는데 매우 중요한 역할을 했던 태그였지만 요즘엔 수정및 변경이 용이하지 않은 관계로 처음처럼 많이 사용하지 않고 그 대신 <div>태그가 그 역할을 담당하게 되었다. 

하지만 게시판 등에서 많이 사용될 수 있으므로 알아두어야 할 태그이다. 

잔소리는 그만하고 본론으로 들어가 보자.

 

 

<table>태그 안에 <tr>은 가로 열을 생성하고 <td>는 세로 칸을 생성한다.

 

예

See the Pen html chap 5-1 by byungchoo (@byungchoo) on CodePen.

 

border 속성.

border는 <table>태그의 속성으로 표의 가장 외곽에 경계선을 입체 형태로 만든다. 필요 없는 경우는 border="0"로 지정한다. 각 칸의 경계선과는 상관이 없다.

<th>는 "table head"라는 뜻으로 각 칸의 제목을 작성할 때 사용하는데 bold타입의 글자가 기본형이다.

 

예

See the Pen html chap 5-2 by byungchoo (@byungchoo) on CodePen.

 

Cellpadding과 Cellspacing 속성.

cellspacing 속성은 칸과 칸 사이의 간격을 조절한다. "0"일 경우 칸과 칸의 경계선이 붙어서 직선처럼 보인다.

cellpadding 속성은 칸 경계와 내용 사이의 간격을 조절한다.

 

예

See the Pen html chap 5-3 by byungchoo (@byungchoo) on CodePen.

 

colspan, rowspan 속성.

colspan 속성은 두개이상의 칸을 합치는 경우 사용한다.

rowspan 속성은 두개이상의 열을 합치는 경우 사용한다.

 

예

See the Pen html chap 5-4 by byungchoo (@byungchoo) on CodePen.

bgcolor 속성 : <table>전체 또는 <tr>, <td>등 한 부분의 background 색상을 지정할 수 있다.

background 속성 : <table>전체 또는 <tr>, <td>등 한 부분의 background 이미지를 지정할 수 있다.

bordercolor 속성: <table>전체 또는 <tr>, <td>등 한 부분의 border 색을 지정할 수 있다.

 

예

See the Pen html chap 5-5 by byungchoo (@byungchoo) on CodePen.

 

 

width와 height 속성 : <table>의 가로 세로의 길이를 지정할 수 있는데 내용이 그 width보다 길면 table도 길어지고 내용이 길어도 중간에 공백이 있다면 공백에서 줄바꿈이 일어난다. 줄바꿈을 원치 않으면 &nbsp;로 공백을 대치한다.

 

예

See the Pen html chap 5-6 by byungchoo (@byungchoo) on CodePen.

 

 

<caption>은 표 위에 독립된 제목을 붙일 때 사용되고 중앙 정렬이 기본이다.

align 속성이 있다.

 

예

See the Pen html chap 5-7 by byungchoo (@byungchoo) on CodePen.

 

<thead> : table header를 생성한다. 한 번만 사용한다.

<tfoot> : table footer를 생성한다. 한 번만 사용한다.

<tbody> : table body를 지정한다. 여러번 쓸 수 있다.

코딩순서는 <thead>, <tfoot>, <tbody> 이지만, 화면에 출력은 <thead>, <tbody>, <tfoot>순으로 나온다.

표 출력 시 페이지가 넘어가게 되면 <thead>와 <tfoot>부분은 반복되어 출력이 된다.

 

예

See the Pen html chap 5-8 by byungchoo (@byungchoo) on CodePen.

 

 

Nested Tables

table안의 <td>안에 table을 넣을 수도 있다.

 

예

See the Pen html chap 5-9 by byungchoo (@byungchoo) on CodePen.

다음은 <table>태그 안에서 사용되는 태그들에 적용되는 속성들입니다. 나중에 은근히 헷갈리는 부분이니 참조 하기 바람.

<table>의 속성들

border

bordercolor

bgcolor

align

width

height

cellspacing

cellpadding

 

<tr>의 속성들

bgcolor

align

valign

 

<th>의 속성들

bgcolor

align

valign

width

height

colspan

rowspan

nowrap

 

<td>의 속성들

bgcolor

align