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

테이블을 만들수 있는 <TABLE>태그 입니다.

테이블

---

                                Caption : 표 이름
                                Table Row(TR) : 표 행
                                Table Hedader(TH) : 표의 제목 부분
                                Table Data(TD) : 표의 셀 하나를 가르킴

---

<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>

---

지금까지 만든 테이블 소스 입니다. 소스안에 설명 추가

18.테이블.htm