표

표는 표준 마크업을 사용하여 지원됩니다. 다음은 제목 행, 여러 일반 행, <tr class="alt">로 마크업된 행이 있는 일반적인 표입니다. 이 행은 대체 헤더로 사용할 수 있는 더 어두운 배경을 생성합니다.

렌더링됨

One 2 3
1.0 2.0 3.0
1.1 2.1 3.1
끝자리가 .2인 숫자가 나옵니다.
1.2 2.2 3.2

HTML

<tr>
 <th>One</th>
 <th>Two</th>
 <th>Three</th>
</tr>
<tr>
 <td>1.0</td>
 <td>2.0</td>
 <td>3.0</td>
</tr>
<tr>
 <td>1.1</td>
 <td>2.1</td>
 <td>3.1</td>
</tr>
<tr class="alt">
 <td colspan="3">Here come some numbers that end in .2!</td>
</tr>
<tr>
 <td>1.2</td>
 <td>2.2</td>
 <td>3.2</td>
</tr>
</table>```

반응형 표

DevSite는 소형 화면에서 다르게 레이아웃되는 반응형 표를 지원합니다. 다음은 일반적인 참조 표입니다.

렌더링됨

이름 유형 설명
value String 응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.
navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>The choice's value, which respondents see as a label when viewing the form</td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

다음은 class="responsive"를 사용하도록 조정된 동일한 표입니다. 브라우저 창을 좁히면 가로가 아닌 세로로 배치됩니다.

렌더링됨

매개변수
valueString
선택의 값으로, 응답자가 양식을 볼 때 라벨로 표시됩니다.
navigationTypePageNavigationType
선택의 탐색 유형

HTML

<table class="responsive">
  <tbody>
    <tr>
      <th colspan=2>Parameters</th>
    </tr>
    <tr>
      <td><code>value</code></td><td><code>String</code><br>The choice's value, which respondents see as a label when viewing the form</td>
    </tr>
    <tr>
      <td><code>navigationType</code></td><td><code><a href="page-navigation-type.html">PageNavigationType</a></code><br>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

class="responsive"를 사용하려면 테이블이 특정 방식으로 구성되어야 합니다.

  • 테이블에는 두 개의 열만 있어야 합니다. 정의되는 항목(키)의 첫 번째 열과 해당 키에 관한 모든 정보의 두 번째 열(필요한 경우 여러 줄)입니다. 이 두 열 제한은 반응형 표를 실제로 2차원 표 형식의 데이터나 체크표시 기반 기능 비교에 사용할 수는 없지만 참조 정보 (또는 표 대신 정의 목록으로 합리적으로 표현할 수 있는 기타 데이터)에는 적합하다는 것을 의미합니다.
  • 키에 관한 정보가 여러 줄인 경우 (예: 유형 및 설명) 각 줄을 <p>로 래핑하여 <br> 대신 줄바꿈을 강제합니다.
  • 헤더 행에는 셀이 하나만 있어야 합니다. <th colspan="2">를 사용하여 두 열에 모두 걸쳐 표시되도록 합니다. 이 동작을 알려주기 위해 DevSite는 첫 번째 <th> 뒤의 모든 <th>를 자동으로 숨깁니다 (의도적으로 매우 손상된 것처럼 보임).

이 기법은 중첩된 테이블이 포함된 매우 복잡한 테이블에도 작동합니다.

렌더링됨

세부정보
쿼리 매개변수
pageSize
int32
요청한 페이지 크기입니다. 서버에서 요청한 것보다 적은 섹션을 반환할 수 있습니다. 지정하지 않으면 서버에서 적절한 기본값을 선택합니다.
pageToken
string
서버에서 반환할 결과 페이지를 식별하는 토큰입니다. 일반적으로 이는 이전 list 메서드 호출에서 반환된 nextPageToken의 값입니다.
요청 본문
요청 본문은 비어 있어야 합니다.
승인
다음 OAuth 2.0 범위 중 하나 이상이 필요합니다.
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.appdata
https://www.googleapis.com/auth/drive.apps.readonly
응답
성공하면 응답 본문은 다음과 같은 구조의 데이터를 포함합니다.
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
섹션 목록입니다.
nextPageToken
string
결과의 다음 페이지를 검색하는 토큰입니다. 결과의 다음 페이지를 검색하려면 후속 list 메서드 호출의 pageToken 필드에 이 값을 전달합니다.

HTML

<table class="details responsive">
  <thead>
    <tr>
      <th colspan="2">Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Query parameters
      </td>
      <td>
        <table class="nested responsive">
          <tbody>
            <tr id="list-pageSize">
              <td>
                <code>pageSize</code>
              </td>
              <td>
                <div><code>int32</code></div>
                <div>Requested page size. Server may return fewer shelves than requested. If unspecified, server will pick an appropriate default.</div>
              </td>
            </tr>
            <tr id="list-pageToken">
              <td>
                <code>pageToken</code>
              </td>
              <td>
                <div><code>string</code></div>
                <div>A token identifying a page of results the server should return. Typically, this is the value of <a href="#list-nextPageToken"><code>nextPageToken</code></a> returned from the previous call to <code>list</code> method.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        Request body
      </td>
      <td>
        <div>The request body must be empty.</div>
      </td>
    </tr>
    <tr>
      <td>
        Authorization
      </td>
      <td>
        <devsite-expandable>
          <div class="showalways">Requires at least one of the following OAuth 2.0 scopes:</div>
<pre>
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.appdata
https://www.googleapis.com/auth/drive.apps.readonly
</pre>
        </devsite-expandable>
      </td>
    </tr>
    <tr>
      <td>
        Response
      </td>
      <td>
        <div>If successful, the response body contains data with following structure:</div>
<pre class="prettyprint prettyprinted">
<span class="pun">{</span>
<span class="pln"></span><span class="str">  "shelves"</span><span class="pun">:</span><span class="pln"> </span><a href="#shelf"><span class="typ">Shelf</span><span class="pun">[]</span></a><span class="pun">,</span><span class="pln"></span>
<span class="str">  "nextPageToken"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"></span>
<span class="pun">}</span>
</pre>
        <table class="nested responsive">
          <tbody>
            <tr id="list-shelves">
              <td>
                <code>shelves</code>
              </td>
              <td>
                <div><a href="#shelf"><code>Shelf[]</code></a></div>
                <div>The list of shelves.</div>
              </td>
            </tr>
            <tr id="list-nextPageToken">
              <td>
                <code>nextPageToken</code>
              </td>
              <td>
                <div><code>string</code></div>
                <div>A token to retrieve next page of results. Pass this value in the <a href="#list-pageToken"><code>pageToken</code></a> field in the subsequent call to the <code>list</code> method to retrieve the next page of results.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
목차에 강제 추가
표 헤더 (<th>) 내에 <h2> 또는 <h3>를 배치하면 이 표와 같이 헤더가 목차에 강제로 추가됩니다. 표 헤더 내에서 <h2> 및 <h3>는 일반 텍스트와 같은 스타일이므로 독자는 구분할 수 없습니다.

고정 레이아웃 테이블

표 셀보다 넓은 콘텐츠 (예: 코드 블록)가 포함된 표가 있는 경우 <table> 요소에 고정 클래스를 추가하여 전체 표가 스크롤되는 대신 해당 콘텐츠가 포함된 표 셀에 오버플로 스크롤을 적용하도록 강제할 수 있습니다.

<table class="fixed">...</table>

다음 표에는 fixed 클래스가 포함되어 있으며 셀에 오버플로가 적용되어 있습니다.

렌더링됨

이름 유형 설명
value String

응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table class="fixed">
  <colgroup>
    <col width="20%">
    <col width="20%">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

이는 아래 표와 비교해 볼 수 있습니다. 이 표에는 전체 표에 오버플로가 적용되는 기본 레이아웃 동작이 나와 있습니다.

렌더링됨

이름 유형 설명
value String

응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.

navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

열 너비 제어

기본적으로 고정 레이아웃 표는 표의 전체 너비를 각 열에 균등하게 분산합니다. 즉, 열이 3개인 고정 레이아웃 표는 각 열을 표의 전체 너비의 33.33% 로 표시합니다.

렌더링됨

이름 유형 설명
value String

응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table class="fixed">
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

고정 레이아웃 테이블에서 열 너비를 제어하려면 테이블의 첫 번째 행에 다음 중 하나가 포함되어야 합니다.

값이 비율(20%) 또는 픽셀(240px)인 width 속성 width 속성이 설정된 <col> 하위 요소가 있는 <colgroup> 요소 최상의 결과를 얻으려면 브라우저에서 이 값을 자동으로 계산하므로 마지막 <col> 요소 또는 마지막 표 셀에 width를 설정하지 마세요.

표 셀의 너비

렌더링됨

이름 유형 설명
value String

응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table class="fixed">
  <tbody>
    <tr>
      <th width="20%">Name</th>
      <th width="20%">Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

요소의 너비

렌더링됨

이름 유형 설명
value String

응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 선택사항의 탐색 유형

HTML

<table class="fixed">
  <colgroup>
    <col width="20%">
    <col width="20%">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

고정 레이아웃 반응형 표

너비 속성을 설정하는 데 <colgroup> 및 <col> 옵션을 사용하면 고정 레이아웃 표를 반응형 표와 결합할 수도 있습니다.

<table class="responsive fixed">...</table>

렌더링됨

매개변수
valueString
양식을 볼 때 응답자에게 라벨로 표시되는 선택사항의 값입니다. 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
선택의 탐색 유형

HTML

<table class="responsive fixed">
  <colgroup>
    <col width="240px">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th colspan="2">Parameters</th>
    </tr>
    <tr>
      <td>
        <code>value</code></td><td><code>String</code><br>
        The choice's value, which respondents see as a label when viewing the form
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td>
        <code>navigationType</code>
      </td>
      <td>
        <code><a href="page-navigation-type.html">PageNavigationType</a></code><br>The choice's navigation type
      </td>
    </tr>
  </tbody>
</table>

전체 너비 표

DevSite는 최상위 테이블 (페이지 제목과 동일한 계층 구조 수준에 있는 테이블)에서 <table class="full-width">...</table>를 사용하여 페이지 전체 너비에 걸쳐 표를 지원합니다.

이름 유형 설명
값 문자열 응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.
navigationType PageNavigationType 선택사항의 탐색 유형

세로선이 있는 표

<table class="vertical-rules">...</table>를 사용하여 표 행의 각 <th>와 <td> 사이에 세로선을 표시할 수 있습니다.

이름 유형 설명
값 문자열 응답자가 양식을 볼 때 라벨로 표시되는 선택사항의 값입니다.
navigationType PageNavigationType 선택사항의 탐색 유형

열의 텍스트

<table class="columns">...</table>를 사용하여 텍스트를 열로 정렬하고 <table>에서 모든 스타일을 삭제할 수 있습니다. 일반적으로 길고 좁은 목록을 정렬하는 데 사용됩니다.

auto
break
case
char 		const
continue
default
do 		double
else
enum
extern 
<table class="columns">
  <tr>
    <td>
      <code>auto</code><br />
      <code>break</code><br />
      <code>case</code><br />
      <code>char</code>
    </td>
    <td>
      <code>const</code><br />
      <code>continue</code><br />
      <code>default</code><br />
      <code>do</code>
    </td>
    <td>
      <code>double</code><br />
      <code>else</code><br />
      <code>enum</code><br />
      <code>extern</code>
    </td>
  </tr>
</table>

표 색상

표준 표는 위와 같이 색상이 지정되며 blue, cyan, green, orange, pink, purple 클래스를 사용하여 다른 여러 색상을 사용할 수 있습니다.

<table class="blue">...</table>

단일 테이블 내에서 여러 색상을 지원하지는 않지만 테이블 색상 클래스 이름은 위에 언급된 다른 테이블 클래스 이름 옵션과 결합할 수 있습니다.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
파란색
key type
key에 관한 몇 가지 정보입니다.
녹청색
key type
key에 관한 몇 가지 정보입니다.
초록색
key type
key에 관한 몇 가지 정보입니다.
Orange
key type
key에 관한 몇 가지 정보입니다.
분홍색
key type
key에 관한 몇 가지 정보입니다.
보라색
key type
key에 관한 몇 가지 정보입니다.

교차 행 색상

표에서 배경 행 색상을 교체하려면 <table> 요소에 alternating-odd-rows 또는 alternating-even-rows 클래스를 추가합니다.

홀수 행 교체

<table class="alternating-odd-rows">
이름 설명
One Fish One Fish에 대한 설명입니다.
Two Fish Two Fish에 대한 설명입니다.
붉은 물고기 붉은 물고기에 대한 설명입니다.
Blue Fish Blue Fish에 대한 설명입니다.
기타 물고기 기타 물고기에 대한 설명입니다.

짝수 행 교체

이 예에서는 표 색상의 색상도 green 클래스를 통해 표에 적용됩니다.

<table class="alternating-even-rows green">
이름 설명
One Fish One Fish에 대한 설명입니다.
Two Fish Two Fish에 대한 설명입니다.
붉은 물고기 붉은 물고기에 대한 설명입니다.
Blue Fish Blue Fish에 대한 설명입니다.
기타 물고기 기타 물고기에 대한 설명입니다.