Bảng

Bảng được hỗ trợ bằng mã đánh dấu tiêu chuẩn. Dưới đây là một bảng thông thường có một hàng tiêu đề, một số hàng thông thường và một hàng được đánh dấu là <tr class="alt">. Hàng này tạo ra nền tối hơn có thể được dùng làm tiêu đề thay thế.

Đã kết xuất

Một Hai Ba
1.0 2 3
1.1 2.1 3.1
Dưới đây là một số số có đuôi là .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>```

Bảng thích ứng

DevSite hỗ trợ các bảng thích ứng có bố cục khác nhau trên màn hình nhỏ hơn. Dưới đây là bảng tham chiếu thông thường:

Đã kết xuất

Tên Loại Mô tả
value String Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu
navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

Và đây là cùng một bảng, được điều chỉnh để sử dụng class="responsive". Nếu bạn thu hẹp cửa sổ trình duyệt, cửa sổ đó sẽ hiển thị theo chiều dọc thay vì chiều ngang:

Đã kết xuất

Tham số
valueString
Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu
navigationTypePageNavigationType
Loại điều hướng của lựa chọn

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>

Để sử dụng class="responsive", bảng phải được cấu trúc theo một cách cụ thể:

  • Bảng chỉ được có hai cột: cột đầu tiên cho các nội dung được xác định (khoá) và cột thứ hai cho tất cả thông tin về khoá đó, ở nhiều dòng nếu cần. Quy định hạn chế về hai cột này có nghĩa là bạn không thể sử dụng bảng thích ứng cho dữ liệu dạng bảng hai chiều thực sự, tính năng so sánh dựa trên dấu kiểm, nhưng bảng thích ứng rất phù hợp với thông tin tham khảo (hoặc bất kỳ dữ liệu nào khác có thể được thể hiện hợp lý bằng danh sách định nghĩa thay vì bảng).
  • Nếu có nhiều dòng thông tin về khoá (ví dụ: một loại và một nội dung mô tả), hãy gói từng dòng trong <p> để buộc ngắt dòng (thay vì <br>).
  • Chỉ được có một ô trong hàng tiêu đề. Sử dụng <th colspan="2"> để buộc nó trải dài cả hai cột. Để nhắc bạn về hành vi này, DevSite sẽ tự động ẩn mọi <th> sau lần đầu tiên (dường như bị hỏng rất nhiều).

Kỹ thuật này cũng áp dụng được cho các bảng rất phức tạp, ngay cả những bảng chứa các bảng lồng nhau:

Đã kết xuất

Thông tin chi tiết
Tham số truy vấn
pageSize
int32
Kích thước trang được yêu cầu. Máy chủ có thể trả về ít kệ hơn yêu cầu. Nếu bạn không chỉ định, máy chủ sẽ chọn một giá trị mặc định phù hợp.
pageToken
string
Mã thông báo xác định trang kết quả mà máy chủ sẽ trả về. Thông thường, đây là giá trị của nextPageToken được trả về từ lệnh gọi trước đó đến phương thức list.
Nội dung yêu cầu
Nội dung yêu cầu phải trống.
Ủy quyền
Yêu cầu ít nhất một trong các phạm vi OAuth 2.0 sau:
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
Phản hồi
Nếu thành công, phần nội dung phản hồi sẽ chứa dữ liệu có cấu trúc sau:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Danh sách các kệ.
nextPageToken
string
Mã thông báo để truy xuất trang kết quả tiếp theo. Truyền giá trị này trong trường pageToken trong lệnh gọi tiếp theo đến phương thức list để truy xuất trang kết quả tiếp theo.

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>
Buộc vào mục lục
Việc đặt <h2> hoặc <h3> vào tiêu đề bảng (<th>) sẽ buộc tiêu đề đó vào mục lục, như với bảng này. Bên trong tiêu đề bảng, <h2><h3> được tạo kiểu như văn bản thông thường, vì vậy, người đọc sẽ không thể phân biệt được.

Bảng có bố cục cố định

Nếu có các bảng có nội dung rộng hơn ô bảng (chẳng hạn như các khối mã), bạn có thể buộc các ô bảng có nội dung đó áp dụng tính năng cuộn tràn cho các ô bảng thay vì cuộn toàn bộ bảng bằng cách thêm một lớp cố định vào phần tử <table>:

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

Bảng sau đây bao gồm lớp fixed và có tình trạng tràn được áp dụng cho các ô của lớp:

Đã kết xuất

Tên Loại Mô tả
value String

Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu

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

navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

So sánh với bảng dưới đây cho thấy hành vi bố cục mặc định khi tràn được áp dụng cho toàn bộ bảng:

Đã kết xuất

Tên Loại Mô tả
value String

Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu

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

navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

Điều khiển chiều rộng cột

Theo mặc định, các bảng có bố cục cố định sẽ phân phối đều chiều rộng tổng thể của bảng cho từng cột (tức là một bảng có bố cục cố định với 3 cột sẽ hiển thị mỗi cột ở mức 33,33% chiều rộng tổng thể của bảng).

Đã kết xuất

Tên Loại Mô tả
value String

Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu

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

navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

Để kiểm soát chiều rộng của các cột trong bảng có bố cục cố định, các ô trong hàng đầu tiên của bảng phải chứa một trong những nội dung sau:

(các) thuộc tính chiều rộng có giá trị là tỷ lệ phần trăm (20%) hoặc tính bằng pixel (240px) một phần tử <colgroup> có các phần tử con <col> đã đặt(các) thuộc tính width trên đó Để có kết quả tốt nhất, đừng đặt width trên phần tử <col> cuối cùng hoặc ô bảng cuối cùng vì trình duyệt sẽ tính toán giá trị này cho bạn.

Chiều rộng của ô trong bảng

Đã kết xuất

Tên Loại Mô tả
value String

Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu

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

navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

Chiều rộng trên các phần tử

Đã kết xuất

Tên Loại Mô tả
value String

Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu

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

navigationType PageNavigationType Loại điều hướng của lựa chọn

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>

Bảng thích ứng có bố cục cố định

Bạn cũng có thể kết hợp bảng bố cục cố định với bảng thích ứng nếu sử dụng tuỳ chọn <colgroup><col> để đặt thuộc tính chiều rộng:

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

Đã kết xuất

Tham số
valueString
Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Loại điều hướng của lựa chọn

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>

Bảng có chiều rộng đầy đủ

DevSite hỗ trợ các bảng trải dài toàn bộ chiều rộng của trang bằng cách sử dụng <table class="full-width">...</table> trên các bảng cấp cao nhất (tức là các bảng ở cùng cấp phân cấp với tiêu đề trang):

Tên Loại Mô tả
value Chuỗi Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu
navigationType PageNavigationType Loại điều hướng của lựa chọn

Bảng có đường kẻ dọc

Bạn có thể hiển thị các đường kẻ dọc giữa mỗi <th><td> trong một hàng bảng bằng cách sử dụng <table class="vertical-rules">...</table>:

Tên Loại Mô tả
value Chuỗi Giá trị của lựa chọn mà người trả lời thấy dưới dạng nhãn khi xem biểu mẫu
navigationType PageNavigationType Loại điều hướng của lựa chọn

Văn bản trong cột

Bạn có thể sắp xếp văn bản theo cột và xoá tất cả kiểu khỏi <table> bằng cách sử dụng <table class="columns">...</table>. Phương thức này thường được dùng để sắp xếp các danh sách dài và hẹp.

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>

Màu bảng

Các bảng tiêu chuẩn được tô màu như trên và có một số màu khác bằng cách sử dụng các lớp blue, cyan, green, orange, pinkpurple.

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

Không hỗ trợ nhiều màu trong một bảng, nhưng bạn có thể kết hợp tên lớp màu bảng với các tuỳ chọn tên lớp bảng khác được đề cập ở trên.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Xanh dương
key type
Một số thông tin về key.
Lục lam
key type
Một số thông tin về key.
Xanh lục
key type
Một số thông tin về key.
Orange
key type
Một số thông tin về key.
Hồng
key type
Một số thông tin về key.
Tía
key type
Một số thông tin về key.

Màu của hàng thay thế

Để thay đổi màu nền của hàng trong bảng, hãy thêm lớp alternating-odd-rows hoặc alternating-even-rows vào phần tử <table>.

Thay đổi các hàng lẻ

<table class="alternating-odd-rows">
Tên Mô tả
One Fish Đây là nội dung mô tả về One Fish
Hai con cá Đây là nội dung mô tả về Two Fish
Cá đỏ Đây là nội dung mô tả về Red Fish
Cá xanh Đây là nội dung mô tả về Blue Fish
Các loại cá khác Đây là nội dung mô tả về Cá khác

Thay đổi các hàng chẵn

Trong ví dụ này, một màu từ màu bảng cũng được áp dụng cho bảng thông qua lớp green.

<table class="alternating-even-rows green">
Tên Mô tả
One Fish Đây là nội dung mô tả về One Fish
Hai con cá Đây là nội dung mô tả về Two Fish
Cá đỏ Đây là nội dung mô tả về Red Fish
Cá xanh Đây là nội dung mô tả về Blue Fish
Các loại cá khác Đây là nội dung mô tả về Cá khác