잡동사니에도 사랑을

[21.09.09] exam10 - cellpadding / cellspacing / colspan / rowspan 본문

JAVA_EE/HTML

[21.09.09] exam10 - cellpadding / cellspacing / colspan / rowspan

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

        <table border="1" width="300" cellpadding="5" cellspacing="10">

cellpadding : 한 셀의 안쪽 여백 간격
cellspacing : 한 셀의 바깥쪽 여백 간격

               <!-- 제목 영역 -->

               <thead>

                       <tr>

                              <!-- align="left, center, right" -->

                              <th colspan="2">획득 포인트</th>

colspan="2" : 두 열을 한 칸으로 병합

                       </tr>

               </thead>

              

               <!-- 본문 영역 -->

               <tbody>

                       <tr align="center">

                              <!-- valign="top, middle(center), bottom" -->

                              <td rowspan="2" valign="top">G획득</td>

rowspan="2" valign="top" : 두 행을 한 행으로 병합, 위쪽으로 정렬

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

                       </tr>

                       <tr align="center">

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

                       </tr>

               </tbody>

              

               <!-- 하단 영역 -->

               <tfoot>

                       <tr>

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

                              <th>15000G</th>

                       </tr>

               </tfoot>      

        </table>

</body>

</html>

결과창

728x90
반응형

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

[21.09.03] Hello.html  (0) 2021.09.12
[21.09.09] exam09 - <thead>/<tbody>/<tfoot>  (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