정보실

웹학교

정보실

html HTML 테이블

본문

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 ... 헤더.

Column headers 


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 스타일을 추가하지 않으면 브라우저가 렌더링 하는 방식입니다.

No styling 


이 CSS를 추가 :

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


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

A proper table 


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>


A colspan example 


또는 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>

A rowspan example 


행 제목 


테이블의 첫 번째 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>


Row headings 


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


테이블에 태그를 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>


thead and tfoot 


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>





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 50회 ]  작성일19-08-20 11:24

웹학교