잡동사니에도 사랑을

[21.09.23]exam02(06_cssDecorate) - 본문

JAVA_EE/CSS

[21.09.23]exam02(06_cssDecorate) -

luvforjunk 2021. 9. 23. 22:01
728x90
반응형

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Insert title here</title>

   <style type="text/css">

      table{

         border-collapse: collapse; /* 이중 테두리 제거 */

      }

     

      td, th{ /* 상속관계 아니고 td와 th 각각 두개에 스타일 시트 적용  */

         text-align: left;

         padding: 5px;

         width: 100px;

         height: 15px;

      }

     

      thead, tfoot{

         background: darkgray;

         color: yellow;

      }

     

      tbody tr:nth-child(even){ /* tbody의 tr에서 짝수행에만 적용 */

         background: aliceblue;

      }

     

      tbody tr:hover{

         background: pink;

      }

   </style>

</head>

<body>

   <h3>1학기 성적</h3>

   <hr>

   <table>

      <thead>

         <tr>

            <th>이름</th> <!-- th는 굵게+가운데정렬 -->

            <th>HTML</th>

            <th>CSS</th>

         </tr>

      </thead>

      <tbody>

         <tr>

            <td>홍길동</td><td>80</td><td>70</td>

         </tr>

         <tr>

            <td>김철수</td><td>20</td><td>54</td>

         </tr>

         <tr>

            <td>박의향</td><td>70</td><td>93</td>

         </tr>

         <tr>

            <td>채유연</td><td>78</td><td>84</td>

         </tr>

      </tbody>

      <tfoot>

         <tr>

            <th>합</th><th>248</th><th>301</th>

   </table>

</body>

</html>

 

결과창

728x90
반응형

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

[21.09.23]exam01(07_cssShadowCursor) -  (1) 2021.09.23
[21.09.23]exam03(06_cssDecorate) -  (0) 2021.09.23
[21.09.23]exam01(06_cssDecorate) -  (0) 2021.09.23
[21.09.17] practice07(css) - inline block 활용  (0) 2021.09.17
[21.09.17] practice06(css) - 마우스 올려 카드 뒤집기(:hover 활용)  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more