• /
  • ログイン
  • 無料アカウント

Tables

Tables help you organize information to make it easier for readers to skim. However, if your table becomes too long, follow the "five to nine" guideline and consider restructuring the information in other ways.

Use sentence case for text in every table column unless it's a specific file name or code value that requires lower case or all caps.

Table template

This is a basic table template.

<table>
<thead>
<tr>
<th style={{ width: "200px" }}>
Item
</th>
<th>
**Requirements**
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item name
</td>
<td>
Description of item
</td>
</tr>
</tbody>
</table>

Additional options:

If you want to...

Do this

Shade every other row

Use <table class="alternate">.

Create a table within a clamshell

Use <table class="spec">.

Highlight row in gray on hover

Add the class table-hover to the <table> element.

Specify individual column widths

Set style="width:###px;" in the header row. In general, for two-column tables on the Docs site:

  1. Set the first column as 200 pixels: <th style="width:200px">.
  2. To allow the table to adjust automatically to the remaining page width, do not set a width for the second column.

Tables to describe UI functions

When using tables to describe available functions, give readers a roadmap. They may know what they want to find or accomplish, but they may not know what it's called or how to do it.

For example, to provide a list of features for a particular UI page, label the header's first column If you want to... and label the second column Do this.

その他のヘルプ

さらに支援が必要な場合は、これらのサポートと学習リソースを確認してください:

問題を作成するこのページを編集する
Copyright © 2020 New Relic Inc.