CSS-테이블

이 튜토리얼은 CSS를 사용하여 HTML 테이블의 다양한 속성을 설정하는 방법을 알려줍니다. 테이블의 다음 속성을 설정할 수 있습니다-

  • 그만큼 border-collapse 브라우저가 서로 접하는 인접한 테두리의 모양을 제어해야하는지 또는 각 셀이 스타일을 유지해야하는지 여부를 지정합니다.

  • 그만큼 border-spacing 표 셀 사이에 표시되어야하는 너비를 지정합니다.

  • 그만큼 caption-side캡션은 <caption> 요소에 표시됩니다. 기본적으로 이들은 문서의 테이블 위에 렌더링됩니다. 캡션 쪽 속성을 사용하여 테이블 캡션의 배치를 제어합니다.

  • 그만큼 empty-cells 셀이 비어있는 경우 테두리를 표시할지 여부를 지정합니다.

  • 그만큼 table-layout 브라우저가 테이블을 렌더링하기 전에 전체 테이블을로드 할 필요없이 열의 나머지 부분에 대해 나타나는 첫 번째 너비 속성을 사용하여 테이블 레이아웃 속도를 높일 수 있습니다.

이제 예제와 함께 이러한 속성을 사용하는 방법을 살펴 보겠습니다.

border-collapse 속성

이 속성은 두 값이 가질 수 붕괴분리 . 다음 예제는 두 값을 사용합니다-

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>

   <body>
      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>
   </body>
</html>

다음 결과가 생성됩니다-

테두리 간격 속성

border-spacing 속성은 인접한 셀을 구분하는 거리를 지정합니다. 국경. 하나 또는 두 개의 값을 취할 수 있습니다. 길이 단위 여야합니다.

하나의 값을 제공하면 세로 및 가로 테두리 모두에 적용됩니다. 또는 두 값을 지정할 수 있습니다.이 경우 첫 번째 값은 가로 간격을 나타내고 두 번째 값은 세로 간격을 나타냅니다.

NOTE − 유감스럽게도이 속성은 Netscape 7 또는 IE 6에서 작동하지 않습니다.

<style type="text/css">
   /* If you provide one value */
   table.example {border-spacing:10px;}
   /* This is how you can provide two values */
   table.example {border-spacing:10px; 15px;}
</style>

이제 이전 예제를 수정하고 효과를 살펴 보겠습니다.

<html>
   <head>
      <style type = "text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
   </head>

   <body>
   
      <table class = "one" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Collapse Example</td></tr>
         <tr><td> Cell B Collapse Example</td></tr>
      </table>
      <br />
      
      <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell A Separate Example</td></tr>
         <tr><td> Cell B Separate Example</td></tr>
      </table>
      
   </body>
</html>

다음 결과가 생성됩니다-

캡션 측 속성

캡션 쪽 속성을 사용하면 <caption> 요소의 내용이 테이블과 관련하여 배치되어야하는 위치를 지정할 수 있습니다. 다음 표에는 가능한 값이 나열되어 있습니다.

이 속성은 top, bottom, left 또는 right 네 가지 값 중 하나를 가질 수 있습니다 . 다음 예에서는 각 값을 사용합니다.

NOTE − 이러한 속성은 IE 브라우저에서 작동하지 않을 수 있습니다.

<html>
   <head>
      <style type = "text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
   </head>

   <body>
   
      <table style = "width:400px; border:1px solid black;">
         <caption class = "top">
            This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "left">
            This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style = "width:400px; border:1px solid black;">
         <caption class = "right">
            This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

다음 결과가 생성됩니다-

빈 셀 속성

empty-cells 속성은 내용이없는 셀에 테두리를 표시해야하는지 여부를 나타냅니다.

이 속성은 show, hide 또는 inherit 세 가지 값 중 하나를 가질 수 있습니다 .

다음은 <table> 요소에서 빈 셀의 테두리를 숨기는 데 사용되는 empty-cells 속성입니다.

<html>
   <head>
      <style type = "text/css">
         table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
      </style>
   </head>

   <body>
   
      <table class = "empty">
         <tr>
            <th></th>
            <th>Title one</th>
            <th>Title two</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty">value</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">value</td>
            <td class = "empty"></td>
         </tr>
      </table>
      
   </body>
</html>

다음 결과가 생성됩니다-

테이블 레이아웃 속성

테이블 레이아웃 속성은 브라우저가 테이블을 렌더링하거나 레이아웃하는 방법을 제어하는 ​​데 도움이됩니다.

이 속성은 fixed, auto 또는 inherit 의 세 가지 값 중 하나를 가질 수 있습니다 .

다음 예제는 이러한 속성의 차이점을 보여줍니다.

NOTE −이 속성은 많은 브라우저에서 지원되지 않으므로이 속성에 의존하지 마십시오.

<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
   
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
   
   </body>
</html>

다음 결과가 생성됩니다-