HTML5 - 테이블(꾸미기 - 특수머리글, 바닥글) <thead>, <tfoot>, <tbody>

2022. 2. 27. 17:18

일반 테이블에 콘텐츠 위, 아래에 특수 머리글 및 바닥글을 행을 추가하여

테이블을 시각적으로 꾸밀 수 있다.

바로 예제 소스코드를 보자.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    table{
      border-spacing:3px;
      border:solid 5px #000;
      text-align:center;
    }
    th{
      border:solid 1px green;
    }
    td{
      border:solid 1px red;
      padding:30px;
    }
    
    thead { background : Pink ; color:blue}
    th.next { background : DeepPink ; color : White ; }
    tfoot { background : HotPink ; }
  </style>
  
</head>
<body> 
    <table>
      
    <thead>
      <tr>
        <th colspan="5">Header 부분 제목
      </tr>
    </thead>
      
    <tbody>
      <tr>
        <th>★</th>
        <th>열 1</th>
        <th>열 2</th>
        <th>열 3</th>
        <th>열 4</th>
      </tr>

      <tr>
        <th>행 1</th>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>

      <tr>
        <th>행 2</th>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
      </tr>
      
      <tr>
        <th colspan="5" class="next">3~4번 째 중간 제목
      </tr>
      
      <tr>
        <th>행 3</th>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
        <td>C4</td>
      </tr>
      
      <tr>
        <th>행 4</th>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
      </tr>      
    </tbody>
      
    <tfoot>
      <tr>
        <th colspan="5">Footer Information
      </tr>
    </tfoot>      
  </table>
</body>
</html>

결과 화면

예제 코드를 보면 <thead> 부분과, <tbody> 부분, <tfoot> 부분을 각 테이블의 내용에 맞게

위치를 선정해서 tr, td 태그를 넣어서 위 결과 화면처럼 꾸밀 수 있다.

<thead> 부분에 tr, th 태그를 넣어서 제목 부분을 꾸며주는데

제목의 한 줄을 다 사용하므로 th 태그에 colspan 속성을 이용해서

5개의 행을 다 사용해서 꾸며준다.

colspan 관련 https://knowing-passion.tistory.com/30 이 글에는

td 에다가 colspan 속성을 사용하였지만 th 태그에다가도 colspan 사용이 가능하다.

<tbody> 부분에 중간 제목도 마찬가지로 tr 태그와 th 태그를 사용하여

중간 제목도 만들어서 사용했다.

<tfoot> 부분은 마지막에 이 테이블에 대한 정보(출처 등등) 넣어서 작성하면 된다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - javascript 에서의 this 를 정확히 알아보자 - 2 (암시적 바인딩) (0)	2022.03.01
JS - javascript 에서의 this 를 정확히 알아보자 - 1(기본 바인딩) (0)	2022.02.28
HTML5 - 테이블(table) - 2 (셀 합치기, 칸 합치기, 열 합치기, 행합치기) (0)	2022.02.26
HTML5 - 테이블(table) - 1 <table>, <tr>, <td> (0)	2022.02.26
HTML5 - (설명 리스트 list) <dl>, <dt>, <dd> (0)	2022.02.26

열공의 기록