[HTML] 테이블 태그

HTML 2014. 7. 7. 09:00


(1) 기본형 표 만들기


<table border="숫자">

      <caption>  표제목  </caption>

      <tr>

             <th> 셀 제목 </th>

     </tr>

      <tr>

             <td> 셀내용 </td>

     </tr>

</table>

o<tr>  : table row

o<th> : table head

o<td> : table data

(2) 합쳐진 셀의 표 만들기

  • <TH ROWSPAN=(셀갯수)>.....</TH> : 헤더에서 셀갯수의 줄을 합친다.
  • <TH COLSPAN=(셀갯수)>.....</TH> : 헤더에서 셀갯수의 칼럼을 합친다.
  • <TD ROWSPAN=(셀갯수)>.....</TD> : 셀내용에서 셀갯수의 줄을 합친다.
  • <TD COLSPAN=(셀갯수)>.....</TD> : 셀내용에서 셀갯수의 칼럼을 합친다.

(3) 표 크기 조정과 정렬

  • 표 크기 조정

o    <TABLE BORDER=(숫자)   WIDTH=(픽셀수)>.....</TABLE> : 표테두리굵기, 넓이 조정

o    <TABLE BORDER=(숫자)   HEIGHT=(픽셀수)>.....</TABLE> : 표테두리굵기, 높이 조정

o    <TABLE BORDER=(숫자) WIDTH=(픽셀수) HEIGHT=(픽셀수)>.....</TABLE> : 표테두리굵기, 넓이, 높이 조정

  • 정렬
    • <TH ALIGN=LEFT>.....</TH> : 헤더 내용을 셀 왼쪽으로 정렬
    • <TH ALIGN=CENTER>.....</TH> : 헤더 내용을 셀 가운데로 정렬
    • <TH ALIGN=RIGHT>.....</TH> : 헤더 내용을 셀 오른쪽으로 정렬
    • <TD ALIGN=LEFT>.....</TD> : 셀 내용을 셀 왼쪽으로 정렬
    • <TD ALIGN=CENTER>.....</TD> : 셀 내용을 셀 가운데로 정렬
    • <TD ALIGN=RIGHT>.....</TD> : 셀 내용을 셀 오른쪽으로 정렬

(4) 테이블의 부가적인 속성

부가적인 속성

기능

border="수치"

표의 테두리 두께를 조정

bordercolor="색상" , "색상코드"

표의 테두리의 색을 지정

WIDTH="수치" , "수치%"

표의 가로넓이를 지정된 수치만큼 정해줍니다.

 백분율 사용가능합니다.

HEIGHT="수치" , "수치%"

표의 세로넓이를 지정된 수치만큼 정해줍니다.

 백분율 사용가능합니다

CELLSPACING="수치"

셀의 구분 선굵기를 조정합니다.

CELLPADDING="수치"

셀의 안쪽여백의 간격을 조정합니다.

bgcolor="색상" , "색상코드"

표의 배경색을 지정해줍니다


(5) 테이블 속성을 이용한 예


table 속성변화

결과

소스 설명

<table border=5>
    <tr>
        <td>border</td>
    </tr>
</table>

border

표의 테두리 두께를 결정합니다.
숫자가 커질수록 두꺼워지며 기본값은 0 입니다.

<table >
    <tr>
        <td>border</td>
    </tr>
</table>

border

border 값을 지정하지 않았을 경우입니다.
기본값이 0 이므로 테두리가 보이지 않져.

<table border=1 cellpadding=5>
    <tr>
        <td>sellpadding/td>
    </tr>
</table>

cellpadding

셀 내부에서 글자와의 거리를 넓힐때 사용합니다.

<table border=1 cellspacing=5>
    <tr>
        <td>cellspacing</td>
    </tr>
</table>

border

셀 사이의 간격을 조절합니다.


(6) <td> 태그의 속성


속성

설명

nowrap

셀의 끝에서 다음줄로 자동으로 내려가는 것을 금지합니다.

width

픽셀값 또는 % 를 적용하여 셀의 가로 넓이를 지정합니다.

height

픽셀값 또는 % 를 적용하여 셀의 세로 높이를 지정합니다.

align

셀 내용의 가로방향 정렬을 나타냅니다.
역시 세가지 정렬방식이 있어여. ( align = center, left ,right )

valign

셀 내용의 세로방향 정렬을 나타냅니다.
정렬방식에는 ( valign = top, middle, bottom, baseline )

bgcolor="black"

<td> 에만 따로 배경색 지정을 할 수 있어여
색상은 이 셀에만 적용이 됩니다.


출처: http://xmljang.com.ne.kr/html

블로그 이미지

하보니

하보니와 함께하는 phP 초보

댓글을 달아 주세요