본문 바로가기

Programming/HTML CSS

[HTML / HTML5 / CSS] table, caption, colgroup, thead, tr, th, td (테이블)

1. table, caption, colgroup, thead, tr, th, td 사용
<table border="1">
<caption>table 예시</caption>
<colgroup>
 <col style="background:red;" />
 <col style="background:blue;" />
</colgroup>
<thead style="background:green;">
 <tr>
  <th>설명1</th>
  <th>설명2</th>
 <tr>
</thead>
  <td>1행1열</td>
  <td>1행2열</td>
 </tr>
 <tr>
  <td>2행1열</td>
  <td>2행2열</td>
 </tr>
</table>
▶ table 태그는 표 전체를 의미하며 tr은 table안에서의 행을, td는 tr안에서의 각 열(cell)을 의미합니다. th는 각 열에대한 제목부분, caption은 table 전체에 대한 제목부분에 해당합니다.

colgroup은 테이블의 각 열에 스타일을 별도로 지정하고자 하는 경우 사용되는 태그입니다. colgroup안에 col태그로 각 열을 지정할 수 있으며 만약 다수의 열을 합쳐저 지정하고자 한다면 span="2" 처럼 col 태그안에 span속성을 사용하여 다수의 열에 대해 하나의 스타일을 공통적으로 적용할 수 있습니다.

만약 col안에 span속성을 사용하지 않는다면 col 태그 하나당 순서대로 왼쪽부터 열이 하나씩 자동으로 지정됩니다.

thead는 th에 대한 스타일을 별도로 지정하는 경우 사용되는 태그입니다. 적용방식은 colgroup과 유사합니다.

HTML5에서도 같은 용도로 사용되는 표준태그입니다. 다만 속성의 경우 HTML5에서는 border, rowspan, colspan 속성만 가지고 있습니다.

2. table, caption, colgroup, thead, tr, th, td 속성

(1) border (table)

외곽선의 두께를 지정하는 속성으로 픽셀단위 입니다.

(2) align (table, caption, th, tr, td)

left (왼쪽), center (가운데), right (오른쪽) 세개의 값을 사용할 수 있으며 table의 정렬상태를 지정합니다.

(3) width (table)

table의 넓이를 지정하는 것으로 정수를 사용할때는 픽셀단위이며 뒤에 %를 붙이면 %단위가 됩니다.

(4) height (table)

table의 높이를 지정하며 픽셀단위 입니다.

(5) bgcolor (table, td)

배경색을 지정합니다. 이 속성의 값으로 #ffff00 의 색상코드나 red와 같은 색상명을 사용할 수 있습니다.

(6) background (table, tr, th, td)

배경이미지를 지정하는 속성으로 background="./sampe.jpg" 와 같이 해당 이미지의 경로를 지정합니다.

(7) cellpadding (table)

table 안에 있는 각 셀(td) 내부의 내용과 외곽선과의 여백을 지정합니다.

(8) cellspacing (table)

table 안에 있는 각 셀(td)과 table 자체의 외곽선과의 여백을 지정합니다.

(9) frame (table)

table 외곽선 표시 형태를 지정하며 void(없음), above(위), below(아래), hsides(위, 아래), vsides(좌, 우), lhs(좌), rhs(우), border(전체) 값을 사용할 수 있습니다.

(10) rules (table)

table 안에 있는 각 셀(td) 사이의 외곽선 표시 형태를 지정합니다. none(없음), rows(행만), cols(열만), all(모두) 값을 사용할 수 있습니다.

(11) valign (tr, td)

내부에 요소들에 대한 수직 정렬 상태를 지정합니다. top(위), middle(가운데), bottom(아래)값을 사용할 수 있습니다.

(12) rowspan (th, td)

현재열이 합쳐질 행의 수를 지정합니다.

(13) colspan (th, td)

현재열이 합쳐질 열의 수를 지정합니다.

3. table, caption, tr, th, td CSS
.table_css {
 margin-top:50px;
 margin-bottom:50px;
}
▶ CSS 정의
<table border="1" class="table_css">
<caption>table 예시</caption>
 <tr>
  <th>설명1</th>
  <th>설명2</th>
 <tr>
  <td>1행1열</td>
  <td>1행2열</td>
 </tr>
 <tr>
  <td>2행1열</td>
  <td>2행2열</td>
 </tr>
</table>
▶ CSS 적용

4. table, caption, tr, th, td CSS 속성

(1) padding

table의 border보다 한단계 더 안쪽에 대한 여백을 지정하며 padding-top(위쪽), padding-bottom(아래쪽), padding-left(왼쪽), padding-right(오른쪽) 속성을 사용합니다.

(2) width

table의 넓이를 지정합니다. 이 속성은 정수를 사용해 px, pt, cm단위와 %를 사용할 수 있습니다.

(3) height

table의 높이를 지정합니다. 값의 지정은 width와 같습니다.

(4) float

table의 정렬방식을 지정하며 none(없음), left(왼쪽), right(오른쪽) 값을 사용할 수 있습니다.

(5) margin

table의 가장 외곽에 대한 속성이며 여백을 지정합니다. margin-top은 위쪽, margin-bottom은 아래쪽, margin-right는 오른쪽, margin-left는 왼쪽여백을 의미합니다.

(6) border

table의 margin에서 한단계 안쪽인 외곽선을 의미하며 세부 항목은 다음과 같습니다.

 border-width 외곽선의 굵기를 지정합니다. thin, medium, thick와 같은 값을 지정할 수 있으며 정수를 사용해 pt, px, cm단위로 지정할 수 있습니다.

border-width만 사용하면 table전체에 적용되며 border-top-width 와 같이 top(위쪽), right(오른쪽), bottom(아래쪽), left(왼쪽)속성을 사용하면 각각에 대한 별도의 설정을 적용할 수 있습니다.

이 속성은 border-style이 적용되어야 합니다.
 border-color 외곽선의 색상을 나타냅니다. 16진수 값이나 red와 같은 명칭을 사용할 수 있으며 border-color만 사용하면 table전체에 적용되고 border-top-color 와 같이 top(위쪽), bottom(아래쪽), left(왼쪽), right(오른쪽) 속성을 사용하면 각각에 대한 별도의 설정을 적용할 수 있습니다.

이 속성은 border-style이 적용되어야 합니다.
 border-style 외곽선의 형태를 지정합니다. 이 속성의 값으로는 none(없음), dotted(점선), dashed(굵은 점선), solid(실선), double(이중 실선), groove(오목한 테두리), ridge(볼록한 테두리), inset(오목함+명암효과), outset(볼록함+명함효과)을 사용할 수 있습니다.
 border-collapse table안의 각 셀에 대한 외곽선 표시 형태를 지정합니다. collapse값은 셀간에 겹치는 외곽선을 하나로 표시하며 separate는 겹치는 외곽선을 합치지 않고 모두 표시합니다.
 border-spacing table안 셀간의 여백을 지정합니다. 10px 처럼 값을 하나만 주는 경우 상하좌우 모두 같은 여백을 가지도록 하며 10px 15px 처럼 두개의 값을 적용하면 첫번째 값은 좌우여백을 두번째 값은 상하여백을 지정하도록 합니다.
 border-radius 외곽선을 둥글게 처리합니다. 이 속성은 CSS3전용으로 해당 브라우저가 CSS3를 지원해야 합니다. 값을 하나만 쓰는 경우 전체 테두리를, 10px 20px 10px 20px 처럼 네개의 값을 순차적으로 쓰는 경우에는 왼쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단 순으로 둥근처리가 적용됩니다.

위 속성부분에서 border 라는 속성을 이미 봤는데 같은 이름으로 CSS에서도 지정이 가능합니다. 이런 경우 border-width와 border-color 그리고 border-style 속성을 한꺼번에 지정할 수 있습니다.
.table_css {
   border: 10px solid red;
}
값은 왼쪽부터 border-width, border-style, border-color 순으로 적용되며 빈 공백으로 값을 구별합니다. 뿐만 아니라 border-top 또는 border-top-color, border-top-width, border-top-style 처럼 부분적인 속성에서도 border와 같은 방법으로 값을 적용시킬 수 있습니다.

(7) caption-side

table에서 caption 태그를 사용한 경우 해당 caption이 위치할 영역을 지정합니다. top(위쪽), bottom(아래쪽)값을 사용할 수 있습니다.

(8) empty-cells

table의 내용중 비어 있는 부분에 대한 표시방법을 지정합니다. hide값을 사용하면 비어있는 부분의 외곽선은 표시하지 않지만 show는 비어 있더라도 외곽선을 표시합니다.