HTML 테이블 작업의 기본 사항 알아보기

웹 테이블의 초기에는 빌딩 레이아웃에서 매우 중요한 부분이었습니다.

나중에 CSS와 레이아웃 기능으로 대체되었으며 오늘날 CSS Flexbox 및 CSS Grid와 같은 강력한 도구를 사용하여 레이아웃을 빌드 합니다. 테이블은 이제 테이블을 만들기 위해 사용됩니다.

table 태그 

table 태그를 사용하여 테이블을 정의합니다.

<table>

</table>

표 안에 데이터를 정의하겠습니다. 우리는 행의 관점에서 추론합니다. 즉, 열이 아닌 테이블에 행을 추가합니다. 행 안에 열을 정의하겠습니다.

Rows (행) 

tr 태그를 사용하여 행이 추가되며 이것이 테이블 요소에 추가 할 수 있는 유일한 것입니다.

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

행이 3 개인 테이블입니다.

첫 번째 행은 헤더의 역할을 할 수 있습니다.

Column headers (열 헤더) 

테이블 헤더에는 열 이름이 포함되며 일반적으로 굵은 글꼴로 표시됩니다.

Excel / Google 스프레드 시트 문서를 생각해보십시오. 상단 A-B-C-D ... 헤더.

th 태그를 사용하여 헤더를 정의합니다.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

table 내용 

테이블의 내용은 다른 tr 요소 내에서 td 태그를 사용하여 정의됩니다.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

CSS 스타일을 추가하지 않으면 브라우저가 렌더링 하는 방식입니다.

이 CSS를 추가 :

th, td {
  padding: 10px;
  border: 1px solid #333;
}

테이블을 적절한 테이블처럼 보이게 만듭니다.

Span 열과 행 

colspan 속성을 사용하여 행이 2 개 이상의 열로 확장되도록 결정할 수 있습니다.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

또는 rowspan 속성을 사용하여 2 개 이상의 행에 걸쳐있을 수 있습니다.

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

행 제목 

테이블의 첫 번째 tr 태그 안에 th 태그를 사용하여 열 머리말을 갖는 방법을 설명하기 전에.

테이블의 첫 번째 tr이 아닌 tr 내부의 첫 번째 요소로 th 태그를 추가하여 행 제목을 가질 수 있습니다.

<table>
  <tr>
    <th></th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <th>Row 1</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

테이블을 구성하기 위한 더 많은 태그 

테이블에 태그를 3 개 더 추가하여 더 체계적으로 만들 수 있습니다.

큰 테이블을 사용할 때 가장 좋습니다. 또한 머리글과 바닥 글을 올바르게 정의합니다.

그 태그는

• thead
• tbody
• tfoot

tr 태그를 랩하여 테이블의 차이 섹션을 명확하게 정의합니다. 사용법 예는 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

Table caption 

테이블에는 내용을 설명하는 caption 태그가 있어야 합니다. 해당 태그는 시작 table 태그 바로 뒤에 놓아야 합니다.

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>