HTML 테이블 태그 완벽가이드 / 예제

HTML 테이블 완벽가이드

테이블 태그를 사용하면 목록화면 또는 표와 같은 형태의 모양을 쉽고 빠르게 코딩 할 수 있습니다.

이번 시간에는 HTML 태그 중에서 Table 태그에 대하여 사용법에 대하여 알아보고 예제를 통하여 확인 해 보도록 하겠습니다.

HTML 테두리 기본 구조

테두리 기본 태그 설명

<table>과 </table>태그 사이에 행(row)에 해당하는 <tr></tr> 태그를 넣습니다.

그리고 <tr></tr>태그 사이에 칸(cell)에 해당하는 <td></td>태그가 들어 갑니다.

<th>는 head cell을 의미 합니다. <th>태그를 사용하면 수평, 수직 정렬이 자동으로 가운데가 됩니다.

또한 볼드(bold)체로 표시 됩니다.

테이블 속성

테이블 크기 : width="픽셀의수(px) 또는 백분율(%)", height = "픽셀의수(px) 또는 백분율(%)"
테두리 : border = "픽셀의수(px)"
테이블 내부의 선 굵기 : cellspacing = "픽셀의수(px)"
테이블 내용과 선 간의 여백 : cellpadding = "픽셀의수(px)"
테이블 배경 색 : bgcolor = "색상이름 또는 색상코드"
테이블 테두리 색 : bordercolor = "색상이름 또는 색상코드"
내용 가로 정렬 : align = "right 또는 left 또는 center"
내용 세로 정렬 : valign = "top 또는 middle 또는 bottom"

셀 합치기(Merge)

행 합치기 : rowspan = "합쳐질 행의 수"
열 합치기 : colspan = "합쳐질 열의 수"

테이블 예제

<!DOCTYPE html>
<html>
<head>
<title>테이블 예제</title>
</head>
<body>
<table width="300px" border="1px" cellspacing="0px" cellpadding="5px" bgcolor="#FFBB00" bordercolor="#998A00">
<tr bgcolor="#5CD1E5">
    <th>이름</th>
    <th>취미</th>
    <th>비고</th>
</tr>
<tr>
    <td align="right">강철</td>
    <td align="center">농구</td>
    <td rowspan="2"></td>
</tr>
<tr>
    <td valign="top">지우</td>
    <td valign="bottom" height="50px">배구</td>
</tr>
</table>
</body>
</html>

예제 결과

예제의 값을 변경 해 보며 확인 해 보면 테이블 만들기 학습에 더욱 도움 이 될 것입니다.

저작자표시 비영리 변경금지 (새창열림)

' IT > 웹디자인' 카테고리의 다른 글

웹디자인의 꽃 CSS란 무엇인가 (8)	2018.05.21
HTML 프레임(frame) 나누기 (1)	2018.05.19
HTML 줄바꿈(4가지 방법) (2)	2018.05.16
HTML 이미지 삽입 / 예제 (4)	2018.05.15
HTML 글자 모양 태그 (2)	2018.05.12