table태그에 대해 알아봅시다 개발

table태그는 워드나 한글에서 주로 쓰이는 표와 비슷한 기능을 하는 태그입니다

3x4칸의 표 이런거 있잖아요???그런거랑 비슷비슷합니다

그럼 허접한 예제로 알아보도록 하겠습니다


이상하게 html 형식으로 하니 table 태그가 안먹혀서 걍 이클립스로 뚝딱 만들었습니다 -ㅅ-;;

암튼...

<html>
 <head>
  <title>테이블을 배워봅시다</title>
 </head>
 <body>
      <table border="1">
           <tr>
                <td colspan="4" align="center" bgcolor="F3FEC1">사용자 관리 페이지</td>
           </tr>
           <tr bgcolor="F3FEC1">
                <td align="center" width="100" height="20">이름</td>
                <td align="center" width="100" height="20">주소</td>
                <td align="center" width="150" height="20">연락처</td>
                <td align="center" width="100" height="20">나이</td>
          </tr>
           <tr>
                <td align="center">김씨</td>
                <td align="center">서울</td>
                <td align="center">010-1111-1111</td>
                <td align="center">20</td>
          </tr>
           <tr>
                <td align="center">장씨</td>
                <td align="center">인천</td>
                <td align="center">010-2222-2222</td>
                <td align="center">21</td>
           </tr>
           <tr>
                <td align="center">십장생</td>
                <td align="center">?????</td>
                <td align="center">010-3333-3333</td>
                <td align="center">10000000</td>
          </tr>
</table>
</body>
</html>

소스 전체 내용은 이렇습니다

하나 하나 정리해봅시다

<table></table>
가장 중요하죠??
웹페이지에 표를 만들겠다!!!라는 선언입니다 이 중간에 세로줄인 <tr></tr> 과 <td></td>가 들어가는 거죠

<td colspan="4" align="center" bgcolor="F3FEC1">사용자 관리 페이지</td>
colspan이란 가로줄을 합치기 라고 보시면 됩니다 워드에선 셀병합이라고 부르죠???
위 예제에서 colspan이 4인 이유는
밑에 들어가는 칸이 4칸이기 때문입니다
예를 들어 가로칸이 가장 많이 들어가는 줄이 5개인데 밑에 줄은 5칸이 아니라 5칸을 합친 1칸을 만든다면
colspan은 5가 되겠죠
colspan 말고도 rowspan 이 있는데 이건 세로줄을 합치겠다는 겁니다

<td colspan="4" align="center" bgcolor="F3FEC1">사용자 관리 페이지</td>
align="center"로 해 두시면 그 칸은 중앙 자동정렬이 됩니다
left,center,right,justify,char 등의 값이 있는데 쓰는건 대부분 왼쪽 오른쪽 가운데정렬이니
뭐 골라 쓰시면 되겠습니다

<td colspan="4" align="center" bgcolor="F3FEC1">사용자 관리 페이지</td>
그 칸의 배경색을 어떤색으로 할 것인가에 대한것입니다
bgcolor에 들어가있는 값은 색상표에서 가져온것입니다
색상표링크
위 링크되있는 사이트로 가보시면 금방 어뜨케 사용 할 수 있을지 나와있습니다
bgcolor를 세로줄 선언인 <tr>에 쓰시면 한줄이 지정한 색으로 바뀌며
<td>에 사용하실 경우엔 한칸만 지정된 색으로 변하게 됩니다

이정도라면 처음 보신분들이라도 금방 하실거라 믿으며 글을 마칩니다

제가 처음 html 태그를 배웠을때 설명으로 하기 때문에 초등학생도 할 수 있을거라 믿습니다 ㅋㅋㅋ

덧글

  • Entropy 2011/10/09 17:16 # 답글

    뭐 요즘 듣기론 table보다는 div를 권장한다고는 하나... table도 엄연한 HTML 표준이지요...
    다만 table을 제대로 쓰지 않으면 문제가 생긴대서 div를 쓰는 것뿐인데 말입니다 ㅇㅅㅇ;;
    HTML은 (자바스크립트나 CSS 등은 제외) 나름 할 줄 안다고 생각했으나 table에서 막히던 기억이...
    지금은 알고 있지만 말이죠 ㄷ.ㄷ
댓글 입력 영역