표를 만드는 table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
오늘은 <table> 태그에 대해 알아 보겠습니다.
<table>은 표를 만드는 태그인데요
아래 그림처럼 작은 표를 만드는 데 쓰일 수 있고,
밑에 처럼, 홈페이지의 전체 구성(layout)을 만드는 데도 사용될 수 있어요.
하지만 원래 table 태그는, 위 그림처럼 데이터를 담고 있는 표를
만들기 위한 목적이라고 합니다~
그래서 홈페이지 전체 구성이나 배치를 위해선, <div>태그를 사용하는 것이 좋으며
앞으로 다룰 css에서 더 자세히 알아보도록 하겠습니다.
CSS란? (HTML과 CSS의 차이, CSS 작성법)
html 기초 태그에 대해서도 썼듯, <table> 역시 </table>과 쌍을 이루어 사용합니다.
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)
<table>은 각각 셀로 만드는데 header cell과 standard cell로 나누어집니다.
<th>를 header cell이라 부르며 나머지를 standard cell로 부릅니다.
<th>내용</th>: table head 약자로, 표의 제목을 쓰는 역할 (기본값은 굵은 글씨체에, 중앙 정렬)
<tr> 내용 </tr> : table row 약자로, 가로줄을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)
<td>내용 </td>: table data 약자로, 셀을 만드는 역할 (기본값은 보통 글씨체에, 왼쪽 정렬)
사용 예
<html> <table border="1"> </body> |
그러면 아래 그림처럼 표시됩니다.
(번호, 이름 부분은 header cell로 굵은 글씨체에 중앙 정렬되었고,
1 김영희, 2 김순자는 standard cell로 보통 글씨체에 왼쪽 정렬되었습니다)
<table> 태그와 함께 사용될 수 있는 속성은 다음과 같습니다.
table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등
① colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정
사용 예 :
<table border="1" > <tr> <td colspan="2">병아리반</td> <td> 1</td> <td>김영희</td> <td> 2</td> |
colspan="2" 로 설정했을 때 화면
② rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정
사용 예 :
<table border="1" > <tr> <td rowspan="3">병아리반</td> </tr> <tr> |
rowspan="3" 으로 설정했을 때 화면
③ border : 테이블 경계선 굵기를 지정(예: border="10")
④ width : 너비를 지정(픽셀이나, %)
⑤ height : 높이를 지정(픽셀이나, %)
아래는 border ="10" width="100%" 설정한 화면입니다.
width와 height는 픽셀로 설정(width="50px")하거나, %로 설정할 수 있습니다.
⑥ cellpadding : 셀과 경계선 사이의 여백(그림 A는 cellpadding="10"으로 지정한 화면)
⑦ cellspacing : 셀과 셀 사이의 여백(그림 B는 cellspacing="10"으로 지정한 화면)
그림 A 그림 B
⑧ align : 셀의 가로줄을 오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬
(그림 C는 align="left" 설정 화면)
⑨ valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬
(그림 D는 valign="middle" 설정 화면)
그림 C
그림 D
⑩ bgcolor : 배경색 지정
bgcolor 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있어요
아래화면은 <table bgcolor="green"> 으로 지정한 화면.
⑪ bordercolor: 경계선 색깔 지정
밑에는<table border="1" bordercolor="red">으로 지정한 화면
위에서 <table> 태그의 여러 속성들에 대해 살펴봤는데
위 속성 들 중에는 HTML5에서 지원되지 않는 속성도 있습니다.
HTML5에서 지원되지 않는 속성 :
align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width
'IT기술 > html' 카테고리의 다른 글
| margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2017.03.23 |
|---|---|
| padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) (0) | 2017.03.23 |
| text-align 속성으로 정렬하기 (left, right, center, justify) (0) | 2017.03.23 |
| border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) (0) | 2017.03.23 |
| html/css div 정렬하기 (왼쪽 정렬, 오른쪽 정렬, 가운데 정렬) (0) | 2017.03.23 |
