mozilla
검색 결과

    테이블

    중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

    CSS 시작하기 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.

    정보 : 테이블

    테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.

    Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.

    시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(Layout)를 사용하는 것이 더 좋은 방법이다.

    테이블 구조

    테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.

    테이블의 같은 줄의 블럭은 하나의 행을 구성한다.

    몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(header)로 사용된다.  테이블의 마지막 행의 그룹은 꼬릿말(footer)로 사용되기도 한다. 테이블의 다른 행들은 본문(body)이 되고 한 덩어리의 그룹으로 간주된다.

    아래에 있는 블럭은 하나의 열(column)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.

    예제

    설렉터페이지 내의 연관관계로 본 설렉터의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.

    첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.

    열은 2개이다.

    여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.

    경계

    셀 블럭은 바깥 여백이 없다.

    셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 border-spacing속성으로 조절 가능하다. 테이블의 border-collapse속성을 collapse로 설정하면 이 여백을 없앨 수 있다.

    예제

    여기 세가지 테이블을 확인 해 보자.

    왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.

    Clubs Hearts
    Diamonds Spades
    Clubs Hearts
    Diamonds Spades
    Clubs Hearts
    Diamonds Spades

    캡션

    캡션(<caption>) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.

    캡션을 아래쪽에 두고 싶다면 caption-side속성 값을 bottom으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.

    캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.

    예제

    이 테이블은 아래쪽에 캡션을 가지고 있다.

    #demo-table > caption {
      caption-side: bottom;
      font-style: italic;
      text-align: right;
    }
    
    Suits
    Clubs Hearts
    Diamonds Spades

    빈 셀블럭

    테이블 element에 empty-cells: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.

    empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.

    예제

    이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.

    아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.

      Hearts
    Diamonds Spades
      Hearts
    Diamonds Spades
    자세히

    CSS 사양서의 테이블에서 좀더 자세한 테이블에 대한 사항을 확인 하라.

    여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.

    액션 : 테이블 꾸미기

    1. doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라.
      <!DOCTYPE html>
      <html>
        <head>
          <title>Sample document 3</title>
          <link rel="stylesheet" href="style3.css">
        </head>
        <body>
          <table id="demo-table">
            <caption>Oceans</caption>
            <thead>
              <tr>
                <th></th>
                <th>Area</th>
                <th>Mean depth</th>
              </tr>
              <tr>
                <th></th>
                <th>million km<sup>2</sup></th>
                <th>m</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Arctic</th>
                <td>13,000</td>
                <td>1,200</td>
              </tr>
              <tr>
                <th>Atlantic</th>
                <td>87,000</td>
                <td>3,900</td>
              </tr>
              <tr>
                <th>Pacific</th>
                <td>180,000</td>
                <td>4,000</td>
              </tr>
              <tr>
                <th>Indian</th>
                <td>75,000</td>
                <td>3,900</td>
              </tr>
              <tr>
                <th>Southern</th>
                <td>20,000</td>
                <td>4,500</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Total</th>
                <td>361,000</td>
                <td></td>
              </tr>
              <tr>
                <th>Mean</th>
                <td>72,000</td>
                <td>3,800</td>
              </tr>
            </tfoot>
          </table>
        </body>
      </html>
      
    2. style3.css를 만들어 아래 긴 내용을 전부 복사해 넣어라.
      /*** Style for doc3.html (Tables) ***/
      
      #demo-table {
        font: 100% sans-serif;
        background-color: #efe;
        border-collapse: collapse;
        empty-cells: show;
        border: 1px solid #7a7;
      }
      
      #demo-table > caption {
        text-align: left;
        font-weight: bold;
        font-size: 200%;
        border-bottom: .2em solid #4ca;
        margin-bottom: .5em;
      }
      
      
      /* basic shared rules */
      #demo-table th,
      #demo-table td {
        text-align: right;
        padding-right: .5em;
      }
      
      #demo-table th {
        font-weight: bold;
        padding-left: .5em;
      }
      
      
      /* header */
      #demo-table > thead > tr:first-child > th {
        text-align: center;
        color: blue;
      }
      
      #demo-table > thead > tr + tr > th {
        font-style: italic;
        color: gray;
      }
      
      /* fix size of superscript */
      #demo-table sup {
        font-size: 75%;
      }
      
      /* body */
      #demo-table td {
        background-color: #cef;
        padding:.5em .5em .5em 3em;
      }
      
      #demo-table tbody th:after {
        content: ":";
      }
      
      
      /* footer */
      #demo-table tfoot {
        font-weight: bold;
      }
      
      #demo-table tfoot th {
        color: blue;
      }
      
      #demo-table tfoot th:after {
        content: ":";
      }
      
      #demo-table > tfoot td {
        background-color: #cee;
      }
      
      #demo-table > tfoot > tr:first-child td {
        border-top: .2em solid #7a7;
      }
      
    3. 브라우저에서 열어서 아래와 같이 나오는 지 확인 하라.

      Oceans

        Area Mean depth
        million km2 m
      Arctic: 13,000 1,200
      Atlantic: 87,000 3,900
      Pacific: 180,000 4,000
      Indian: 75,000 3,900
      Southern: 20,000 4,500
      Total: 361,000  
      Mean: 72,000 3,800
    4. 화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다.
      • 캡션은 테이블 바깥 경계에 표시된다.
      • 옵션에 최소 포인트 크기 세트가 있다면 km2에 있는 '2'처럼 어깨 글자에 적용 될 것이다.
      • 테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.
      • 콜론은 Stylesheet에서 추가 되었다.
    도전

    아래처럼 보이도록 Stylesheet를 바꿔 보라

      Area Mean depth
      million km2 m
    Arctic: 13,000 1,200
    Atlantic: 87,000 3,900
    Pacific: 180,000 4,000
    Indian: 75,000 3,900
    Southern: 20,000 4,500
    Total: 361,000  
    Mean: 72,000 3,800

    Oceans

     

    정답 확인

    다음에는?

    이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 Full property table를 보라.

    다음에는 CSS의 Stylesheet구조와 목적에 대해 다시한번 살펴보자.

    문서 태그 및 공헌자

    Contributors to this page: SpikeYou, teoli
    최종 변경: teoli,