잡동사니에도 사랑을

[21.09.09] exam09 - <thead>/<tbody>/<tfoot> 본문

JAVA_EE/HTML

[21.09.09] exam09 - <thead>/<tbody>/<tfoot>

luvforjunk 2021. 9. 9. 19:04
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

 

 

 

<body>

         <table border="1" width="300">

너비를 넓히고 싶으면 width="300"식으로 잡아주면 된다.

 

                  <!-- 제목 영역 -->

                  <thead>

                           <tr>

                                   <th width="50" height="50">No</th> <!-- 가운데 정렬, 굵게 -->

<th>는 'table head'라고 하는데, 가운데 정렬을 자동으로 해주고, 글자를 굵게 표시해준다.

                                   <th>획득 포인트</th>

                           </tr>

                  </thead>

                  

                  <!-- 본문 영역 -->

                  <tbody>

                           <tr align="center">

                                   <td>2</td>

                                   <td>루비 결제 5000G</td>

                           </tr>

                           <tr align="center">

                                   <td>1</td>

                                   <td>가입 축하 10000G 지급</td>

                           </tr>

                  </tbody>

 

                  

                  <!-- 하단 영역 -->

                  <tfoot>

                           <tr>

                                   <th width="50" height="30">합계</th>

                                   <th>15000G</th>

                           </tr>

                  </tfoot>

 

         </table>

</body>

</html>

 

**<thead>/<tbody>/<tfoot>은 보여주기 편하도록 작성하는 것일 뿐, 입력하지 않아도 실행 가능하다.

 

최종 결과창

728x90
반응형

'JAVA_EE > HTML' 카테고리의 다른 글

[21.09.03] Hello.html  (0) 2021.09.12
[21.09.09] exam10 - cellpadding / cellspacing / colspan / rowspan  (0) 2021.09.09
[21.09.09] exam11 - id 속성과 class속성(버튼 색 바꾸기)  (0) 2021.09.09
[21.09.09] exam12 - 블록 레벨 요소(div, p, h1, ul)/인라인 레벨 요소(span)  (0) 2021.09.09
[21.09.09] exam13 - <mark>/<abbr>/<dfn>/<cite>/<small>/<ruby>  (0) 2021.09.09
'JAVA_EE/HTML' Related Articles more