jQuery | javascript | CSS

18.XHTML- 테이블 속성 ( Table 속성)

Godffs 2009. 7. 27. 14:05
반응형
테이블을 만들수 있는 <TABLE>태그 입니다.


<TABLE> 태그 기본 생성입니다.
1행 1열 테이블 만들기

                           <table>    -> 테이블 선언
                               <caption>1행1열</caption>    -> 테이블 제목
                                   <tr>    -> Table Row 테이블 내의 한 행
                                      <td>1행 1열</td>    ->Table Data(각 행의 셀)
                                  </tr>
                           </table>
 
결과
 1행1열 
2행 2열 테이블 만들기
                           <table border="3">
                               <tr>
                                   <td>1행1열</td><td>1행2열</td>
                               </tr>
                               <tr>
                          <td>2행1열</td><td>2행2열</td>
                      </tr>
                  </table>
결과      
 1행1열 1행2열
 2행1열 2행2열
   
테이블 <Table> 속성입니다.

BORDER = "픽셀수" : 테이블 외각 두깨
BORDERCOLOR="색상" : 테이블 외각 색깔
WIDTH="100%" (픽셀) HEIGHT="20%" (픽셀) : 넓이, 높이
CELLSPACING="픽셀수" : 셀 사이 간격
CELLPADDING="픽셀수" ; 셀 안의 간격
ALIGN="left" , "center" , "right"  : 좌,우,가운데 정렬
VALIGN="top" , "middle" , "bottom" : 상,중,하 정렬
BGCOLOR="red" 또는 RGB 로 색깔 지정가능
BACKGROUND="이미지경로" 예)"./images/jc.jpg"
HSPACE="텍스트와 테이블의 가로 간격"
VSPACE="텍스트와 테이블 세로 간격"

셀 병합 하는 방법입니다.
병합 하려는 셀의 기준은 항상 왼쪽과 위를 잡습니다.
기준 태그에 rowspan(행) 또는 colspan(열) 속성을 추가 하고 속성에 합칠 셀의 갯수를 지정 하고 포함된 셀의 태그인 <TD>를 지워줍니다.

기본적으로 3행 2열 테이블을 만듭니다.
저는 1행1열과 1행 2열 병합 , 2행1열과 3행 1열을 병합 하도록 하겠습니다.

<table border="3">
    <tr>
        <td>1</td><td>2</td> -> 1+2 병합
    </tr>                                             
    <tr>
        <td>3</td><td>4</td> -> 3+5 병합
    </tr>
    <tr>
        <td>5</td><td>6</td>
    </tr>
</table>
수정된 셀 병합
<table border="1" width="200">
    <tr>
        <td colspan="2" align="center">1</td>(삭제<td>2</td>)
    </tr>
    <tr align="center" >
        <td rowspan="2" valign="bottom">3</td> <td>4</td>
    </tr>
    <tr>
        <td>6</td>(삭제<td>5</td>)
    </tr>
</table>

기타)표 안에 표 만들기

    <table border="1" width="200" height="200">
        <tr>
        <td>1</td>
            <td rowspan="2" align="center">
             
                <table border="1" width="100%">
                    <tr>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>4</td>
                    </tr>
                </table>

            </td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </table>
지금까지 만든 테이블 소스 입니다. 소스안에 설명 추가
반응형