본문 바로가기
스터디/publishing

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

by 깝태 2011. 1. 24.

안녕하세요, 드디어 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


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