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ố | |
---|---|
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 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 |
|
||||
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, }
|
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> và <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>
và <col>
để đặt thuộc tính chiều rộng:
<table class="responsive fixed">...</table>
Đã kết xuất
Tham số | |
---|---|
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="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>
và <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
, pink
và purple
.
<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 |