[CSS 강좌] 표(table) 과 배경색 꾸미기

 

 

배경색을 만드는 속성

배경색은 background-color 속성으로 만듭니다.

table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다.

기본 모양

다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        width: 100%;
        border-top: 1px solid #444444;
        border-collapse: collapse;
      }
      th, td {
        border-bottom: 1px solid #444444;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
     
        <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
       
      </thead>
      <tbody>
     
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
         <tr>
          <th>성부</th><th>성자</th><th>성령</th><th>기독교의</th><th>근본사상</th>
        </tr>
     
      </tbody>
    </table>
  </body>
</html>

 

위 코드의 결과는

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,