Tables

Tables are supported with standard markup. Here's a typical table with a heading row, several regular rows, and a row marked up as <tr class="alt">, which produces a darker background that can be used as an alternate header.

Rendered

One	Two	Three
1.0	2.0	3.0
1.1	2.1	3.1
Here come some numbers that end in .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>```

Responsive tables

DevSite supports responsive tables that lay out different on smaller screens. Here's a normal reference table:

Rendered

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form
`navigationType`	`PageNavigationType`	The choice's navigation type

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>

And here's the same table, adapted to use class="responsive". If you narrow the browser window, it will lay out vertically instead of horizontally:

Rendered

Parameters
`value`	`String` The choice's value, which respondents see as a label when viewing the form
`navigationType`	`PageNavigationType` The choice's navigation type

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>

To use class="responsive", tables must be structured in a particular way:

There must be only two columns in the table: the first column for the things being defined (the key), and the second column for all information about that key, in multiple lines if necessary. This two-column restriction means that responsive tables cannot be used for truly two-dimensional tabular data, checkmark-based feature comparison, but they are well suited for reference information (or anything other data that could reasonably be expressed by a definition list instead of a table).
If there are multiple lines of information about the key — say, a type and a description — wrap each line in <p> to force line breaks (instead of <br>).
There must be only one cell in the header row. Use <th colspan="2"> to force it to span both columns. To remind you of this behavior, DevSite automatically hides any <th> after the first (which intentionally looks very broken).

This technique also works for very complex tables, even those that contain nested tables:

Rendered

Details

Query parameters

`pageSize`	`int32` Requested page size. Server may return fewer shelves than requested. If unspecified, server will pick an appropriate default.
`pageToken`	`string` A token identifying a page of results the server should return. Typically, this is the value of `nextPageToken` returned from the previous call to `list` method.

Request body

The request body must be empty.

Authorization

Requires at least one of the following OAuth 2.0 scopes:

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

Response

If successful, the response body contains data with following structure:

{
  "shelves": Shelf[],
  "nextPageToken": string,
}

`shelves`	`Shelf[]` The list of shelves.
`nextPageToken`	`string` A token to retrieve next page of results. Pass this value in the `pageToken` field in the subsequent call to the `list` method to retrieve the next page of results.

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>

Forcing into table of contents
Putting an `<h2>` or `<h3>` inside a table header (`<th>`) will force the header into the table of contents, as with this table. Inside a table header, `<h2>` and `<h3>` are styled like regular text, so readers won't be able to tell.

Fixed-layout tables

If you have tables with content that is wider than a table cell (such as code blocks), you can force the table cells with that content to apply overflow scrolling to the table cells instead of having the entire table scroll by adding a fixed class to the <table> element:

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

The following table includes the fixed class and has overflow applied to its cells:

Rendered

Name Type Description

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
`navigationType`	`PageNavigationType`	The choice's navigation type

value

String

The choice's value, which respondents see as a label when viewing the form

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

navigationType PageNavigationType The choice's navigation type

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>

Compare this to the table below which shows the default layout behavior where overflow is applied to the entire table:

Rendered

Name Type Description

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
`navigationType`	`PageNavigationType`	The choice's navigation type

value

String

The choice's value, which respondents see as a label when viewing the form

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

navigationType PageNavigationType The choice's navigation type

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>

Controlling column widths

By default, fixed-layout tables evenly distribute the table's overall width to each of its columns (i.e., a fixed-layout table with three columns displays each column at 33.33% of the table's overall width).

Rendered

Name Type Description

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
`navigationType`	`PageNavigationType`	The choice's navigation type

value

String

The choice's value, which respondents see as a label when viewing the form

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

navigationType PageNavigationType The choice's navigation type

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>

To control the width of the columns in a fixed-layout table, the cells in the first row of the table must include one of the following:

width attribute(s) whose values are either a percentage (20%) or in pixels (240px) a <colgroup> element with <col> child elements that have width attribute(s) set on them For best results, do not set a width on the last <col> element or last table cell since the browser calculates this value for you.

Widths on table cells

Rendered

Name Type Description

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
`navigationType`	`PageNavigationType`	The choice's navigation type

value

String

The choice's value, which respondents see as a label when viewing the form

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

navigationType PageNavigationType The choice's navigation type

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>

Widths on elements

Rendered

Name Type Description

Name	Type	Description
`value`	`String`	The choice's value, which respondents see as a label when viewing the form Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
`navigationType`	`PageNavigationType`	The choice's navigation type

value

String

The choice's value, which respondents see as a label when viewing the form

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

navigationType PageNavigationType The choice's navigation type

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>

Fixed-layout responsive tables

You can also combine fixed-layout tables with responsive tables if you use the <colgroup> and <col> option for setting width attributes:

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

Rendered

Parameters
`value`	`String` The choice's value, which respondents see as a label when viewing the form Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
`navigationType`	`PageNavigationType` The choice's navigation type

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>

Full-width tables

DevSite supports tables that span the entire width of the page by using <table class="full-width">...</table> on top-level tables (i.e., tables at the same hierarchical level as page headings):

Name	Type	Description
value	String	The choice's value, which respondents see as a label when viewing the form
navigationType	`PageNavigationType`	The choice's navigation type

Tables with vertical rules

You can display vertical rules between each <th> and <td> in a table row by using <table class="vertical-rules">...</table>:

Name	Type	Description
value	String	The choice's value, which respondents see as a label when viewing the form
navigationType	`PageNavigationType`	The choice's navigation type

Text in columns

You can arrange text in columns and remove all styling from a <table> by using <table class="columns">...</table>. This is typically used for arranging long narrow lists.

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>

Table colors

Standard tables are colored as above, and several other colors are available using the classes blue, cyan, green, orange, pink, and purple.

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

Multiple colors within a single table is not supported, but table color classnames can be combined with the other table classname options mentioned above.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>

Blue
`key`	`type` Some information about the `key`.

Cyan
`key`	`type` Some information about the `key`.

Green
`key`	`type` Some information about the `key`.

Orange
`key`	`type` Some information about the `key`.

Pink
`key`	`type` Some information about the `key`.

Purple
`key`	`type` Some information about the `key`.

Alternate row colors

To alternate background row colors in your table, add an alternating-odd-rows or alternating-even-rows class to the <table> element.

Alternating odd rows

<table class="alternating-odd-rows">

Name	Description
One Fish	This is a description of One Fish
Two Fish	This is a description of Two Fish
Red Fish	This is a description of Red Fish
Blue Fish	This is a description of Blue Fish
Other Fish	This is a description of Other Fish

Alternating even rows

In this example, a color from table colors is also applied to the table via the green class.

<table class="alternating-even-rows green">

Name	Description
One Fish	This is a description of One Fish
Two Fish	This is a description of Two Fish
Red Fish	This is a description of Red Fish
Blue Fish	This is a description of Blue Fish
Other Fish	This is a description of Other Fish