관리 메뉴

Young's Net

[HTML] HTML 강좌, 제 7강의 - 테이블을 만들어보자! 본문

스터디/ publishing

[HTML] HTML 강좌, 제 7강의 - 테이블을 만들어보자!

TEDDY 깝태 2011.01.24 21:13
   

안녕하세요, 드디어 7강 입니다. 이번 강의는 테이블에 관한 내용으로 꽉 채우고 8강은 프레임, 9강은 폼 입력 양식에 관한
태그를 배우고 HTML 강의는 끝날것같습니다. 그리고 CSS 강의를 작성할 것 같습니다. 제가 오늘... 밤을 새울 생각이라서
아마 내일 오전(?) 내로 모두 작성될 듯 합니다. 테이블은 HTML 강의에서 제일 많이 쓰이는 태그입니다.
HTML 언어를 특기로 삼지 않으셔도 꼭 알아두시면 좋을것 같습니다.



먼저 테이블 기본구조부터 시작해 속성을 차근차근 설명해드리겠습니다.

테이블 생성 - <table> ~ </table>

테이블 행 만들기 - <tr> ~ </tr>
테이블 열 만들기 - <td> ~ </td>
(<th> 를 사용하여 나열 시 굵은글자로 됨)
테이블 강한 열 - <th>

테이블 정렬방식 - <table align, valign>
테이블 테두리 두께 - <table border = "N">
테이블 배경색 - <table bgcolor = "색상명/RGB값">
테이블 테두리 색 - <table bordercolor = "색상명/RGB값">


테이블 예제
<table>
<tr>
<td> 1행 1열 </td> <td> 1행 2열 </td>
</tr>
</table>

<TR> 태그로 행을 만들며 <TD> 태그로 열을 만듭니다. 그리고 테이블 태그에서 align 정렬시
CENTER 은 사용 불가능합니다, 가운데로 정렬할려고 하는 경우 <center> ~ </center> 태그를 이용해 정렬해야됩니다.
valign 으로 수직 정렬이 가능합니다.

테이블 여백을 주는 속성은 두 가지 속성이 있습니다.
<table cellspacing = "N"> ~ </table> - 셀의 테두리선 두께
<tabel cellpadding = "N"> ~ </table> - 셀과 텍스트간의 여백

그리고 <tr>, <td> 태그 속성은 따로 있으나 위 테두리 속성과 똑같습니다.
단, <td> 속성에서는 행과 열을 합치는 rowspan 과 colspan 이 있습니다.
자세한 내용은 예제를 참고하시는게 낳을듯 합니다.

오늘 강의또한 여기서 마칩니다, 테이블 부분부터는 예제를 꼭 참고하시길 바랍니다.
이로써 7강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

7강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.




3 Comments
  • 프로필사진 BlogIcon 이츠하크 2011.01.24 21:16 신고 이야! 이게 바로 제가 원했던 모범강좌네요. 오케이. 우리 블로넷(검색창에 쳐 보세요)에 강사로 한번 초빙해야 겠는데요. 우리 블로넷 친구들은 이런데에 아주 잼병이라서리. 아주 유익한 블로그 잘 보고 갑니다. 이웃 맺고 갑니다. ^^
  • 프로필사진 BlogIcon 완소풉 2011.01.24 21:30 신고 와아, 정말 감사합니다~ ^^ ;;
    사실 이번 강의는 다른 강의들에 비해 저 또한 이해력이 떨어지는것같아 다른것들에 비해
    원만하게 작성을 못 했다고 생각했는데 그렇게 해주시니 감사합니다~!

    그리고 블로넷이란 사이트는 처음 알았는데 되게 신기하고, 유익할것같네요! 댓글 감사합니다~

    저도 링크걸겠습니다! ^ㅡ^
  • 프로필사진 구로짱 2011.04.24 18:45 신고 감사합니다 잘쓰겠습니다.
댓글쓰기 폼