구글덕후의 HTML [2] 테이블

세계가 점점 더 디지털화됨에 따라 학생들은 웹 개발의 기본 사항을 배우는 것이 중요합니다. 웹 디자인의 기본 요소 중 하나는 HTML을 사용하여 테이블을 만드는 것입니다. 이 기사에서는 지난시간 HTML의 기본 속성에 대해 배운 여러분들에게 테이블 요소에 대해 논의 할 것입니다. 또한 개념을 설명하는 데 도움이되는 두 가지 샘플 코드를 제공 할 것입니다.

HTML의 테이블은 무엇입니까?

테이블은 데이터를 행과 열로 구성하는 방법입니다. 일반적으로 일정, 가격 및 제품 사양과 같은 웹 사이트에 정보를 표시하는 데 일반적으로 사용됩니다. HTML의 테이블은 <pable> 태그를 사용하여 작성되며 테이블의 구조를 정의하는 추가 태그가 이어집니다.

여러분이 테이블을 더 잘 이해하기 위한 Tip.

기본부터 시작하는 것이 중요합니다. 테이블이 무엇이며 웹 사이트에서 사용되는 방법에 대해 한번 조사해보세요. 기본적으로 테이블 구조를 가지고 있는 녀석들은 일상생활에서는 '표', '행과열' 등으로 이루어진 모든 데이터 입니다. 
다음으로 HTML에 테이블의 기본 구조를 이해 해야 합니다.

테이블을 정의하는 데에는

<table> 태그가

행과 열을 만드는 데 사용되는 <tr> 및 <td> 태그가 포함되어야합니다.

<tr> 태그가 새 행을 생성하는 반면 <td> 태그는 새 열을 만듭니다.

1. 테이블 요소 :이 요소는 테이블을 정의하는 데 사용됩니다.
2. TR 요소 :이 요소는 테이블의 행을 정의하는 데 사용됩니다.
3. TH 요소 :이 요소는 테이블의 헤더 셀을 정의하는 데 사용됩니다.
4. TD 요소 :이 요소는 표에서 데이터 셀을 정의하는 데 사용됩니다.
5. 캡션 요소 :이 요소는 표에 제목을 추가하는 데 사용됩니다.
6. COL 요소 :이 요소는 테이블의 열 그룹을 정의하는 데 사용됩니다.
7. ColGroup 요소 :이 요소는 테이블의 열 그룹을 정의하는 데 사용됩니다.
8. Thead 요소 :이 요소는 테이블에서 헤더 행 그룹을 정의하는 데 사용됩니다.
9. TBody 요소 :이 요소는 테이블에서 데이터 행 그룹을 정의하는 데 사용됩니다.
10. tfoot 요소 :이 요소는 테이블에서 바닥 글 그룹을 정의하는 데 사용됩니다.

샘플 코드 1 : 기본 테이블 구조

<table>
  <tr>
    <td> 세포 1 </td>
    <td> 세포 2 </td>
    <td> 세포 3 </td>
  </tr>
  <tr>
    <td> 세포 4 </td>
    <td> 세포 5 </td>
    <td> 세포 6 </td>
  </tr>
</table>

이 코드는 두 개의 행과 3 개의 열이있는 기본 테이블을 만듭니다. 

 

출력 값 : 

---

세포 1	세포 2	세포 3
세포 4	세포 5	세포 6

---

샘플 코드 2 : 헤더가있는 테이블

<table>
  <tr>
    <th> 항목 </th>
    <th> 가격 </th>
    <th> 수량 </th>
  </tr>
  <tr>
    <td> 사과 </td>
    <td> 1200원</td>
    <td> 10 </td>
  </tr>
  <tr>
    <td> 오렌지 </td>
    <td> 780원 </td>
    <td> 8 </td>
  </tr>
</table>

이 코드는 ""항목"", ""가격""및 ""수량""의 ​​헤더가있는 테이블을 만듭니다. 데이터에는 서로 다른 과일에 대한 정보가있는 두 줄이 포함됩니다.

출력 값 : 

---

항목	가격	수량
사과	1200원	10
오렌지	780원	8

---