본문 바로가기
html

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

by 지구별에 2014. 3. 5.



표를 만드는 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>
<head>
</head>
<body>

<table border="1">
  <tr>
    <th>번호</th>
    <th>이름</th>
  </tr>
  <tr>
    <td>1</td>
    <td>김영희</td>
  </tr>
  <tr>
    <td>2</td>
    <td>김순자</td>
  </tr>
</table>

</body>
</html>

 

그러면 아래 그림처럼 표시됩니다.

(번호, 이름 부분은 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>
   </tr>
  <tr>

      <td> 1</td>

      <td>김영희</td>
  </tr>
  <tr>

     <td> 2</td>
    <td>김순자</td>
 </tr>
</table>

 

colspan="2" 로 설정했을 때 화면

 

 

② rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정


사용 예 :

 

 

 <table border="1" >

  <tr>

    <td rowspan="3">병아리반</td>
    <td>김순자</td>
  </tr>
  <tr>
    <td>김영희</td>

  </tr>

  <tr>
    <td>이철수</td>
  </tr>
</table>


 

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 


그래서 위의 속성들은 css를 통해 지정하는 것이 바람직합니다(아래 링크 참조)

 

    

css로 table 속성 지정(너비,높이,글자색,배경색,선그리기)

 

css로 table 속성 지정 2(cellpadding, cellspacing 을 css로)

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

display 속성을 사용하여 table만들기 (css로 table, tr, td)

 

[html/css] table 중앙 정렬하기

 

 

「추천글」

 

[html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

[css] - DIV 태그를 이용하여 레이아웃 하기

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) 

반응형

댓글