:: 테이블 만들기 태그 <table>

 

테이블 태그는 홈페이지 작성이 아주 많이 쓰이는 태그입니다. 글이나 이미지, 도표 만들기 등 정리된 틀을 잡기 위한 태그입니다. 예제를 보시면 이해가 가실겁니다.

 

  1. 가장 기본적인 구성입니다. 아래 border 는 테이블 라인의 두께를 지정해줍니다.만일 0으로 한다면 경계선이 안보이게 됩니다. bgcolor 는 테이블의 배경색을 RGB 색으로 지정해줍니다. 흰색의 경우 bgcolor 부분을 아예 빼주셔도 됩니다.

    기타 일반적으로 많이 쓰이는 색상의 경우 RGB 컬러인 대신 bgcolor=”black” 혹은 red, green, blue 등으로 지정이 가능합니다.

    코드 보기
    <table border=”1″ bgcolor=”#cccccc”>
    <tr>
    <td> 내용
    </td>
    </tr>
    </table>
    내용
  2. 두개의 칸을 만드시려면 아래와 같습니다. 아래 예제에서는 테이블의 가로 사이즈를 지정하였습니다. width 다음에 넣게 되는데 원하는 픽셀(pixel) 사이즈를 넣으시면 됩니다.

    아래 td에서도 width 지정이 가능한데 처음 table에서 지정한 사이즈에서 얼마를 할당할건지를 정해줄 수 있습니다. 마찬가지로 픽셀사이즈나 아니면 예제와 같이 %로 지정하시면 됩니다.

    align 은 정렬을 지정합니다. align 을 사용하지 않으면 자동으로 왼쪽 정렬이 되며, center 는 중앙정렬, right 는 오른쪽 정렬을 의미합니다.

    코드 보기
    <table width=”160″ border=”1″>
    <tr>
    <td align=”center” bgcolor=”blue”>
    내용1 </td>
    <td align=”center” bgcolor=”green”>
    내용2 </td>
    </tr>
    </table>
    내용1 내용2
  3. 다음은 테이블에서 위에 타이틀이 들어가는 경우입니다. 박스가 많이 나뉘어집니다.

    한줄이 추가될때마다 <tr><td>….</td></tr> 이 생성된다고 보면 됩니다.

    코드 보기
    <table width=”160″ border=”1″>
    <tr>
    <td width=”50%” align=”center” bgcolor=”blue”>
    제목1 </td>
    <td width=”50%” align=”center” bgcolor=”green”>
    제목2 </td>
    </tr>
    <tr>
    <td align=”center”>
    내용1 </td>
    <td align=”center”>
    내용2 </td>
    </tr>
    </table>
    제목1 제목2
    내용1 내용2
  4. 다음은 테이블에서 타이틀이 colspan 을 사용해서 두개의 칼럼을 하나로 만드는 방법입니다.

    코드 보기
    <table width=”160″ border=”1″>
    <tr>
    <td width=”100%” align=”center” bgcolor=”blue” colspan=”2″>
    제목 </td>
    </tr>
    <tr>
    <td width=”50%” align=”center”>
    내용1 </td>
    <td width=”50%” align=”center”>
    내용2 </td>
    </tr>
    </table>
    제목
    내용1 내용2
  5. 다음은 테이블에서 rowspan 을 사용한 예제입니다.

    코드 보기
    <table width=”160″ border=”1″>
    <tr>
    <td width=”50%” align=”center” bgcolor=”blue” rowspan=”2″>
    제목 </td>
    <td width=”50%” align=”center”>
    내용1 </td>
    </tr>
    <tr>
    <td align=”center”>
    내용2 </td>
    </tr>
    </table>
    제목 내용1
    내용2
  6. 다음은 테이블에서 style 을 적용한 예제입니다.

    코드 보기
    <table border=”1″ style=”background-color:orange;border:1px dotted black;width:160;border-collapse:collapse;”>
    <tr style=”color:white;background-color:red;”>
    <td style=”padding:10px;align:center;width:50%”>
    제목1 </td>
    <td style=”padding:10px;align:center;width:50%”>
    제목2 </td>
    </tr>
    <tr style=”color:white;background-color:green;”>
    <td style=”padding:10px;”>
    내용1 </td>
    <td style=”padding:10px;”>
    내용2 </td>
    </tr>
    </table>
    제목1 제목2
    내용1 내용2




1 Response

  1. Master 댓글:

    궁금한 점은 댓글을 달아주세요.

댓글 남기기