HTML5

HTML - <table> 태그

똥베이런 2016. 6. 20.
반응형

줄과 칸으로 이루어진 표를 만들 수 있는 태그

 

<table>      à 

<caption></caption>  à 테이블 위에 테이블 제목 표시

<tr>            à 

<th></th>           à 제목 칸

<td></td>           à 

</tr>

</table>

 

<table  border=”1”   width=””   height=””    align=”left/center/right”

                 bgcolor=”색상값”    background=”경로

cellpadding=”칸과 칸의 내용사이의 여백 

cellspacing=”칸과 칸사이의 간격” >

 

 

테이블의 가로 크기만 정하고 칸 td의 크기를 정하지 않으면 td안의 글씨에 따라 칸의 크기가 변한다.

테이블의 크기를 %로 하면 웹브라우저 창의 크기에 따라 크기가 변한다.

 

cellpadding 속성으로 칸의 여백을 지정하면 그만큼 한 칸에 표현할 수 있는 공간이 줄어든다.

bgcolor  – 테이블에 배경색을 넣으면 전체 테이블에 배경색이 적용됨

           각 칸마다 배경색을 다르게 하려면 td태그에 bgcolor특성을 지정하면 됨.

background  – 배경이미지가 테이블의 크기보다 크면 이미지가 잘림

               배경이미지가 작으면 테이블 크기에 맞게 이미지가 반복됨

 

 

<tr  height=””  align=”left/center/right”  bgcolor=”색상값”>

tr 태그에 위의 속성을 적용하면 그 줄의 모든 td에 적용된다.

 

 

<td  height=””  align=”left/center/right”  bgcolor=”색상값 

       background=”경로”     colspan=”합치고 싶은 칸의 수 

       rowspan=”합치고 싶은 줄의 수”>

 

 

<table  border=”1px”  bordercolor=”색상값

bordercolordark=”어두운 면의 색상 지정 

bordercolorlight=”테두리 밝은 면의 색상 지정”>

 

bordercolordark bordercolorlight특성은 파이어폭스나 오페라 에서는 동작하지 않는다.

반응형

'HTML5' 카테고리의 다른 글

<table>태그의 frame속성  (0) 2016.06.21
HTML5 - 글자장식태그  (0) 2016.06.20
<img>태그  (0) 2016.06.20
HTMK - 제목을나타내는 H 태그  (0) 2016.06.19
HTML - 태그설명  (0) 2016.06.19

댓글