[HTML] table 태그 구조 (table, thead, tfbody, tfoot, tr, th, td, caption)

[HTML] table 태그 구조 (table, thead, tbody, tfoot, tr, th, td, caption)

 

 

웹 사이트에 표를 나타내고 싶을 때 table 태그를 사용해 작성한다. 표를 만들 때 사용하는 table태그와 관련 있는 태그들을 보면 다음과 같다.

 

 

table : 표의 시작과 끝

caption : 표 제목

thead : 표의 최상단 영역

tbody : 표의 최상단, 최하단 영역을 제외한 가운데 영역

tfoot : 표의 최하단 영역

tr : 테이블의 row, 행을 구분하는 태그

th : 테이블의 헤더 데이터를 나타낼 때 사용 (ex : 열의 제목을 표시할 때 주로 사용)

td : 테이블의 row에서 cell를 구분하는 태그로 사용된다. (table data)

 

 

코드

            <table border="1">
              <caption>테이블구조</caption>
              <thead>
                <tr>
                  <th>No</th>
                  <th>title</th>
                  <th>writer</th>
                  <th>writerTime</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>1</td>
                  <td>게시판 목록은 이쁜 화면 참고해야겠다.</td>
                  <td>글쓴이</td>
                  <td>2022.03.29</td>
                </tr>
              </tbody>
              
              <tfoot>
                <tr>
                  <td>f1</td>
                  <td>f2</td>
                  <td>f3</td>
                  <td>f4</td>
                </tr>
              </tfoot>
            </table>

 

결과보기 

테이블구조

No	title	writer	writeTime
1	게시판 목록은 이쁜 화면 참고해야겠다.	글쓴이	2022.03.29
f1	f2	f3	f4

 

 

rowspan, colspan 속성 값을 사용해서 테이블 행과 행을 이을수도, 열과 열을 이을수도 있다.