[CSS 기초강좌] 표(table) 꾸미기 > 테두리 만들기

홈페이지제작시 정말 중요한 부분이죠 테이블은 홈페이지에서
참으로 유용하게 여러곳에서 사용되기 때문에 정확히 숙지해야
할 부분입니다. 오늘은 CSS강좌 테이블 만들고 테두리색상을 넣는 것을
알아 보겠습니다.

   

테두리 만드는 속성

테두리는 border 속성으로 만듭니다.

table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.

기본 모양

아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다.

th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다.

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
   
<style>
  table {
    width: 100%;
 
  }
</style>

   
  </head>
  <body>
    <table>
      <thead>
     
        <tr>
          <th>우리나라</th><th>대한민국</th><th>사랑</th>
        </tr>
       
      </thead>
      <tbody>
        <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
   
<style>
  table {
    width: 100%;
    border: 1px solid #444444;
 border-color:#F00
  }
</style>

   
  </head>
  <body>
    <table>
      <thead>
     
        <tr>
          <th>우리나라</th><th>대한민국</th><th>사랑</th>
        </tr>
       
      </thead>
      <tbody>
        <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
         <tr>
          <td>기독교</td><td>부흥한 </td><td>대한민국</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

 

 

 

               

 

블로그 이미지

itworldkorea

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

,