15. HTML Tables

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

 

See the Pen 01.HTML Tables by heunho (@heunho) on CodePen.

 

 

 

 

 

 

---

HTML 테이블 정의

---

HTML 테이블은 <table> 태그로 정의됩니다.

 

각 테이블 행은 <tr> 태그로 정의됩니다. 테이블 헤더는 <th> 태그로 정의됩니다. 기본적으로 테이블 제목은 굵게 표시되고 가운데 정렬이 됩니다. 테이블 데이터 / 셀은 <td>태그로 정의됩니다.

 

See the Pen 02.Defining an HTML Table by heunho (@heunho) on CodePen.

 

 

참고 : <td>요소는 테이블의 데이터 컨테이너입니다. 여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록. 기타 테이블 등이 있습니다.

 

 

 

 

HTML 테이블 - 테두리 추가

---

테이블의 테두리를 지정하지 않으면 테두리 없이 표시됩니다.

테두리는 CSS broder 속성을 사용하여 설정됩니다.

 

See the Pen 03.HTML Table - Adding a Border by heunho (@heunho) on CodePen.

참고 : 테이블 및 셀 모두에 대한 경계를 정의해야 합니다.

 

 

 

 

HTML Table - collapse 테두리

---

테두리를 하나의 테두리로 축소하려면 CSS border-collapse 속성을 추가하십시오.

 

See the Pen 04.HTML Table - Collapsed Borders by heunho (@heunho) on CodePen.

 

 

 

 

 

HTML  테이블 - Cell에 Padding 추가

---

셀 패딩은 셀 내용과 테두리 사이의 간격을 지정합니다.
패딩을 지정하지 않으면 테이블 셀이 패딩 없이 표시됩니다.
패딩을 설정하려면 CSS 패딩 속성을 사용하십시오.

 

See the Pen 05.HTML Table - Adding Cell Padding by heunho (@heunho) on CodePen.

 

 

 

 

 

 

HTML Table-제목 왼쪽 정렬

---

기본적으로 테이블 제목은 굵게 표시되고 가운데에 표시됩니다.
표 머리글을 왼쪽 정렬하려면 CSS 텍스트 정렬 속성을 사용하십시오.

See the Pen 06. by heunho (@heunho) on CodePen.

 

 

 

 

 

 

HTML 테이블-테두리 간격

---

테두리 간격은 셀 사이의 간격을 지정합니다.

테이블의 테두리 간격을 설정하려면 CSS border-spacing 속성을 사용하세요.

 

See the Pen 07.HTML Table - Adding Border Spacing by heunho (@heunho) on CodePen.

 

 

참고 : 표에서 테두리가 축소 된 경우 테두리 간격이 적용되지 않습니다.

 

 

 

 

HTML Table - colspan

---

가로로 셀을 두 개 이상 합치려면 colspan 속성을 사용해보세요.

 

See the Pen 08.HTML Table - Cells that Span Many Columns by heunho (@heunho) on CodePen.

 

 

 

 

 

 

 

HTML Table - rowspan

---

세로로 셀을 두개 이상 합치고 싶을 경우 rowspan 속성을 사용해보세요.

 

See the Pen 09.HTML Table - Cells that Span Many Rows by heunho (@heunho) on CodePen.

 

 

 

 

 

 

HTML Table - Caption

---

테이블에 캡션을 추가하려면 <caption> 태그를 사용하세요.

 

See the Pen 10.HTML Table - Adding a Caption by heunho (@heunho) on CodePen.

 

 

참고 : <caption> 태그는 <table> 태그 바로 뒤에 삽입해야합니다.

 

 

하나의 테이블을 위한 특별한 스타일

---

하나의 테이블에 특별한 스타일을 정의하려면 테이블에 id 속성을 추가해보세요.

 

예제)

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

 

이제 해당 테이블에 특별한 스타일을 정의할 수 있습니다.

See the Pen 11.A Special Style for One Table-1 by heunho (@heunho) on CodePen.

 

 

그리고 응용하게 되면 아래 예제와 같이 예쁘게 꾸밀 수 있습니다.

See the Pen 11.A Special Style for One Table-2 by heunho (@heunho) on CodePen.

 

 

 

 

 

 

---

단원 요약

---

• HTML <table> 요소를 사용하여 테이블을 정의하세요.

• HTML <tr> 속성을 사용하여 테이블 행을 정의하세요.

• HTML <td> 요소를 사용하여 테이블 데이터를 정의하세요.

• HTML <th> 요소를 사용하여 테이블 제목을 정의하세요.

• HTML <capction> 요소를 사용하여 테이블 캡션을 정의하세요.

• CSS border 속성을 사용하여 테두리를 정의하세요.

• CSS border-collapse 속성을 사용하여 2개의 테두리를 하나의 테두리로 축소해보세요.

• CSS padding 속성을 사용하여 셀에 padding을 추가해보세요.

• CSS text-align 속성을 사용해서 Cell안의 텍스트를 정렬해보세요.

• CSS border-spacing 속성을 사용하여 셀 사이의 간격을 설정하세요.

• colspan 속성을 사용하여 셀을 여러 열로 확장해보세요.

• rowspan 속성을 사용하여 셀을 여러 행으로 확장해보세요.

• id 속성을 사용해 하나의 테이블을 특별하게 정의할 수 있습니다.

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Tables