: 표시작, 표테두리 <capt.."/> : 표시작, 표테두리 <capt.." /> : 표시작, 표테두리 <capt.." />
더보기
  1. 파워맘
  2. 허스토리
  3. 블로그
  4. 아지트
  5. 오락실
  6. 아줌마의날

Talk Talk

이슈토론
8억원 상당의 아파트를 제공 받는 대가로 이러한 조건을 내새운 시부모님에 대해 어떻게 생각하시나요?
배너_03
친구끼리도 말 못하는 이야기

웃자! 웃자!

조회 : 230

세바의 태그 강습 - 표만들기


BY 세바스챤_™ 2001-10-09

(1) 기본형 표 만들기


<table border="숫자">                : 표시작, 표테두리
     <caption>(표제목)</caption>      : 표제목 지정
         <th>(헤더내용)</th>           : 헤더 내용 지정(굵은 글꼴)

             <tr>                    : 줄끝남 지정
             <td>(셀내용)</td>         : 셀내용 지정


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


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


(3) 표 크기 조정과 정렬


  •  표 크기 조정

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

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

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

    

  •  정렬

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


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




    • ▶기본테이블태그

    태그소스
    결 과
    <table border=1> <tr> <td>태그코리아</td> </tr> </table>
    태그코리아
    <table border=1> <tr> <td>태그코리아</td> <td>자바소스</td> </tr> </table>
    태그코리아 자바소스
    <table border=1> <tr> <td>글씨태그</td> <td>그림태그</td> </tr> <tr> <td>음악태그</td> <td>폭탄태그</td> </tr> </table>
    글씨태그 그림태그
    음악태그 폭탄태그


    ▶테이블태그예제

    예제 - 1행2열 표 예제 - 2행3열 표 예제 - 3행4열 표
    <table border="1" bordercolor="red" width="100">
     <tr>
      <td>1</td>
      <td>2</td>
     </tr>
    </table>    		 <table border="1" bordercolor="blue" width="100">
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>
     <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
     </tr>
    </table>    		 <table border="1" bordercolor="ff00ff" width="100">
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
     </tr>
     <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
     </tr>
     <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
     </tr>
    </table>
    결과
    　1 2
    		결과
    1 2 3
    4 5 6
    		결과
    1 2 3 4
    5 6 7 8
    9 10 11 12


    ▶테이블의 부가적인 속성

    #유머 #실수

    새로 올라온 댓글

    ㈜이너스커뮤니티 서울특별시 마포구 양화로 147, 5층 (동교동, 아일렉스빌딩) 대표번호(02)519-1200 FAX 070-8015-9295 webmaster@inuscomm.co.kr

    대표이사 : 황인영 사업자등록번호: 220-81-75706 통신판매번호 : 제2026-서울마포-0952호

    인터넷신문사 등록번호:서울특별시 아01229 / 등록일자: 2010.05.03 / 발행인 : 황인영 / 편집인 : 이강민 / 청소년보호정책(책임자:황순용)

    Copyright Inuscommunity Co.,Ltd. All rights reserved  INUScommunity:맘패밀리그룹

    매년 5월 31일은 아줌마의 날
    아줌마의 날 캠페인 스폰서/협찬문의

    부가적인 속성 기능
    border="수치" 표의 테두리 두께를 조정해줍니다.
    bordercolor="색상" , "색상코드" 표의 테두리의 색을 지정합니다. 위의 예제에 보시면 테두리의 색이 각자 틀리다는 것을 알수 있을겁니다.
    WIDTH="수치" , "수치%" 표의 가로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능합니다.
    HEIGHT="수치" , "수치%" 표의 세로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능합니다.
    CELLSPACING="수치" 셀의 구분 선굵기를 조정합니다.
    CELLPADDING="수치" 셀의 안쪽여백의 간격을 조정합니다.
    bgcolor="색상" , "색상코드" 표의 배경색을 지정해줍니다.