html

HTML - 표 만드는 요소

2월 12, 2019
테이블 태그를 이용하면 표를 만들 수 있습니다. 표의 기본적인 구성은 다음과 같습니다.

<table border="숫자">
  <tr>
    <th> 셀 제목 </th>
  </tr>
  <tr>
    <td> 셀 내용 </td>
  </tr>
</table>


<table>태그와 속성

테이블에 사용할 수 있는 태그는 다음 표를 참고합니다.

태 그 설 명
<table> 표의 전체 테두리
<tr> 표의 행
<th> 표의 제목 셀.
(굵게 표시됨.)
<td> 내용

다음 속성을 사용할 수 있습니다.

속 성 설 명
bgcolor 표의 배경색
background 표의 배경 그림이 위치하는 경로
border 테두리 두께
bordercolor 표의 테두리의 색을 지정
bordercolorlight 표의 위쪽과 오른쪽 테두리에 색을 지정
bordercolordark 표의 왼쪽과 아래쪽 테두리에 색을 지정
width 가로 크기
height 세로 크기
cellspacing 셀의 구분 선 굵기를 설정
cellpadding 셀의 안쪽 여백을 설정
align 표의 정렬.
left | center | right 중 하나

다음은 테이블 속성 변화의 그림입니다.



<th>, <td> 태그와 속성

<th>, <td> 태그에서 사용할 수 있는 속성입니다.

속 성 설 명
nowrap 자동 줄바꿈을 하지 않음
width 가로 크기
height 세로 크기
align 가로 정렬.
center | left | right 중 하나.
valign 세로 정렬.
top | middle | bottom | baseline 중 하나
border 테두리 두께
bgcolor 셀의 배경 색상
background 셀의 배경 그림이 위치하는 경로
bordercolorlight 셀의 위쪽과 오른쪽 테두리에 색을 지정
bordercolordark 셀의 왼쪽과 아래쪽 테두리에 색을 지정
colspan 가로로 합칠 셀의 개수.
여러 칼럼을 하나로 합칠 때 사용
rowspan 세로로 합칠 셀의 개수.
여러 줄을 하나로 합칠 때 사용
cellspacing 셀의 구분 선 굵기를 설정
cellpadding 셀의 안쪽 여백을 설정

합쳐진 셀의 표를 만들려면 rowspan 이나 colspan 속성을 이용합니다.

<!-- 헤더에서 셀 갯수의 줄을 합친다. -->
<th rowspan="셀 갯수">.....</th>
<!-- 헤더에서 셀 갯수의 칼럼을 합친다. -->
<th colspan="셀 갯수">.....</th>
<!-- 셀내용에서 셀 갯수의 줄을 합친다. -->
<td rowspan="셀 갯수">.....</td>
<!-- 셀내용에서 셀 갯수의 칼럼을 합친다. -->
<td colspan="셀 갯수">.....</td>

표의 크기나 테두리를 조절하려면 border 나 width, height 속성을 이용하세요. 

<-- 표 테두리 굵기, 넓이 조정 -->
<table border="숫자" width="픽셀 수">.....</table>
<-- 표 테두리 굵기, 높이 조정 -->
<table border="숫자" height="픽셀 수">.....</table>
<-- 표 테두리 굵기, 넓이 조절 -->
<table border="숫자" width="픽셀 수" height="픽셀 수">.....</table>

표의 내용을 정렬하고 싶다면 align 속성을 이용합니다.

<-- 헤더 내용을 셀 왼쪽으로 정렬 -->
<th algn="left">.....</th>
<-- 헤더 내용을 셀 가운데로 정렬 -->
<th align="center">.....</th>
<-- 헤더 내용을 셀 오른쪽으로 정렬 -->
<th align="right">.....</th>
<-- 셀 내용을 셀 왼쪽으로 정렬 -->
<td align="left">.....</td>
<-- 셀 내용을 셀 가운데로 정렬 -->
<td align="center">.....</td>
<-- 셀 내용을 셀 오른쪽으로 정렬 -->
<td align="right">.....</td>


<caption>, <figcaption>태그: 제목 붙이기

<caption>태그와 <figcaption>태그는 표의 제목을 붙이고 싶을 때 사용합니다.

<caption>태그는 제목이 중앙에 정렬되는 반면 <figcaption>태그는 중앙 정렬이 되지 않습니다.

<figcaption>태그는 <table>태그 시작 전에 사용하면 표 위에 표시되고, </table>태그 다음에 추가하면 표 아래에 제목이 표시됩니다.

다음은 <caption>태그의 사용 예입니다.

<table border="숫자">
      <caption>  표 제목  </caption>
      <tr>
           <th> 셀 제목 </th>
    <th> 내용 </th>
     </tr>
      <tr>
           <td> 셀 내용 </td>
    <td> 셀 내용 </td>
     </tr>
</table>


다음은 <figcaption>태그의 예입니다. <figcaption>태그를 사용하려면 <figure>태그로 <table>태그 전체를 감싸 주어야 합니다.

<figure>
  <figcaption>
    <p>표의 상단 제목</p>
  </figcaption>
  <table border="숫자">
      <tr>
             <th> 셀 제목 </th>
    <th> 내용 </th>
     </tr>
      <tr>
             <td> 셀 내용 </td>
    <td> 셀 내용 </td>
     </tr>
  </table>
  <figcaption>
    <p>표의 하단 제목</p>
  </figcaption>
</figure>



<thead>, <tbody>, <tfoot> 태그

HTML 문서를 구성할 때 <head>태그와 <body>태그로 문서를 구성하듯, 마찬가지로 <table>태그도 제목(thead), 본문(tbody), 요약(tfoot)으로 구성하여 문서 구조화할 수 있습니다. 이렇게 하면 이 코드가 무엇을 나타내려 하는지 파악이 수월해 집니다.

이 요소들은 문서의 구조적 표현이며 행을 그룹화합니다.

  <table border="1">
      <caption>표의 제목</caption>
   <thead>
     <tr>
    <th>제목 1</th>
    <th>제목 2</th>
  </tr>
   </thead>
   <tbody>
     <tr>
    <td>셀 내용</td>
    <td>셀 내용</td>
  </tr>
   </tbody>
      <tfoot>
     <tr>
    <td>표의 요약</td>
    <td>표의 요약</td>
  </tr>
   </tfoot>
  </table>

Tag:

0 Comments

0 댓글