1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: 表
slug: MDN/Editor/Tables
tags:
- Guide
- MDN Meta
- editor
translation_of: MDN/Editor/Tables
---
<div>{{MDNSidebar}}</div>
<p><span class="seoSummary">表は情報を表現する便利な方法です。この記事では MDN の表を作成し、維持する方法と、いつ作るべきでいつ作るべきでないのかをカバーします。</span></p>
<p>MDNでは、主にデータ点ごとに2つを超える情報のリストを表す時に表を使います。名前と値のあるリストを作成している場合は、ふつうは表の代わりにリストを使います。つまり2列の表の使用は避けた方が良いです。これは主にモバイル端末では表の表示が難しく読みにくいことがあるためで、このためなるべく使用を避けています。</p>
<p>表の使い方や適切な書式の詳細は <a href="/ja/docs/MDN/Contribute/Guidelines/Writing_style_guide" title="/ja/docs/Project:MDN/Style_guide">MDN スタイルガイド</a>を読んでください。しかし、表の挿入や編集の実用テクニックを見ていきましょう。</p>
<h2 id="Creating_a_table" name="Creating_a_table">表を作成する</h2>
<p>新しい表を挿入するには、ツールバーの<strong>表</strong>ボタンを押してください。外見は <img alt="as of Aug-2017" src="https://mdn.mozillademos.org/files/15297/table%20icon.png" style="height: 14px; width: 15px;"> のようにになっています。</p>
<p><strong>表のプロパティ</strong>ダイアログボックスが開きます。</p>
<p><img alt="表のプロパティダイアログボックスの表のプロパティタブのスクリーンショットb" src="https://mdn.mozillademos.org/files/15299/Table%20properties%20dialog%20box.png" style="border-style: solid; border-width: 1px; height: 363px; width: 295px;"></p>
<p>ここには<strong>表のプロパティ</strong>と<strong>高度な設定</strong>の2つのタブがあります。</p>
<h3 id="Table_Properties_tab" name="Table_Properties_tab">表のプロパティタブ</h3>
<p>This tab is where you'll do most of your work configuring the table, as there are very few items in the <strong>Advanced</strong> tab that we recommend using. The options here are:</p>
<dl>
<dt>行数</dt>
<dd>The number of rows in your table. You may add more rows while in the editor, but this lets you quickly configure your table.</dd>
<dt>列数</dt>
<dd>The number of columns in your table.</dd>
<dt>ヘッダ</dt>
<dd>Lets you configure where your headers are, if any. By default, no header cells are added to your table; however, we generally prefer that tables have headers, so you should change this most of the time. The possible values are <strong>None</strong>, <strong>First row</strong>, <strong>First column</strong>, and <strong>Both</strong>.</dd>
<dt>行揃え</dt>
<dd>Lets you align the table along the left, right, or center of the article. <strong>Please do not use this option.</strong> Our style guide specifies that tables should always be left-aligned. There are very few exceptions to this rule.</dd>
<dt>キャプション</dt>
<dd>You may choose to add a caption to your table; however, we do not usually do so on MDN, so you will probably leave this blank.</dd>
<dt>表の概要</dt>
<dd>You should typically leave this blank, as you should be providing appropriate explanatory text adjacant to your table.</dd>
</dl>
<h3 id="Advanced_tab" name="Advanced_tab">高度な設定タブ</h3>
<p>The <strong>Advanced</strong> tab provides a few additional options, most of which we don't use on MDN and will likely remove in the future.</p>
<p><img alt="Screenshot of the Table Properites dialog box's Advanced tab" src="https://mdn.mozillademos.org/files/15301/table%20properties%20advanced%20tab.png" style="border-style: solid; border-width: 1px; height: 360px; width: 296px;"></p>
<p>As you see here, there are only four options; they are:</p>
<dl>
<dt>Id</dt>
<dd>The {{HTMLElement("table")}} element's <code>id</code>. We generally do not use IDs on tables on MDN.</dd>
<dt>文字表記の方向</dt>
<dd>Lets you establish the writing direction used in the table. This should be used only when localizing content.</dd>
<dt>スタイル</dt>
<dd>This field lets you hand-enter custom CSS. <strong>Do not use this field! We will probably remove your table if you do.</strong> We are trying to eliminate all uses of custom styles outside what's provided by our stylesheets.</dd>
<dt>スタイルシートクラス</dt>
<dd>This lets you specify a stylesheet class to use for the table. This should nearly always be "standard-table", which is our standard table class.</dd>
</dl>
<p>Once you've finished configuring your table, click the <strong>OK</strong> button to create it.</p>
<h2 id="Maintaining_tables" name="Maintaining_tables">表を保守する</h2>
<p>Once a table has been created, working with it is very much like in any table editor, entering data into its cells. Pressing the tab key will advance you to the next cell in the table, wrapping to the next row if you're in the last cell in the row you're currently working on. If you're in the last cell of the last row when you press tab, a new row will be added to the end of the table, and the cursor will be placed in the first cell of the new row.</p>
<p>You may right-click on the table to get an assortment of options for adjusting the cells, rows, columns, and the table itself:</p>
<p><img alt="Screenshot of the Table context menu" src="https://mdn.mozillademos.org/files/15303/table%20context%20menu.png" style="height: 196px; width: 166px;"></p>
<dl>
<dt>Paste</dt>
<dd>On browsers that support pasting via script (some, including Firefox, do not, for security purposes), selecting this option pastes the contents of the clipboard at the current point in the table.</dd>
<dt>Cell</dt>
<dd>This submenu offers options related to the selected cell or cells. See {{anch("Cell options")}}.</dd>
<dt>Row</dt>
<dd>This submenu offers options related to the selected row or rows. See {{anch("Row options")}}.</dd>
<dt>Column</dt>
<dd>This submenu offers options related to the selected column or columns. See {{anch("Column options")}}.</dd>
<dt>Delete Table</dt>
<dd>Deletes the entire table.</dd>
<dt>Sort Table</dt>
<dd>Opens a dialog box providing options for sorting the contents of the table. See {{anch("Sorting tables")}} below.</dd>
<dt>Table Properties</dt>
<dd>Opens the same table properties dialog used to create a new table.</dd>
</dl>
<h3 id="Cell_submenu" name="Cell_submenu">セルのサブメニュー</h3>
<p>The Cell submenu offers options related to manipulating and editing cells in your table, and looks like this:</p>
<p><img alt="Screenshot of the Table context menu's Cell submenu" src="https://mdn.mozillademos.org/files/15305/table%20context%20menu%20-%20cell%20submenu.png" style="height: 235px; width: 275px;"></p>
<p>These options should be fairly self-explanatory, with the exception that <strong>Merge Cells</strong> is available only if you have selected multiple cells; you can then use this option to combine them into a single cell. The <strong>Merge Right</strong> and <strong>Merge Down</strong> options merge the current cell with the one to the right, or below, respectively.</p>
<h3 id="Cell_Properties_dialog_box" name="Cell_Properties_dialog_box">セルプロパティのダイアログボックス</h3>
<p>The <strong>Cell Properties</strong> option opens a dialog box that gives you control over the details of a cell:</p>
<p><img alt="Screenshot of the Cell Properties dialog box" src="https://mdn.mozillademos.org/files/15307/Cell%20Properties%20dialog%20box.png" style="border-style: solid; border-width: 1px; height: 311px; width: 386px;"></p>
<p>The options you can configure here are:</p>
<dl>
<dt>Width</dt>
<dd>The width of the cell; you may change the units used for this value using the adjacent drop-down. <strong>Please don't use this.</strong> You shouldn't need to adjust widths of cells except in rare cases involving nesting images or example code within tables.</dd>
<dt>Height</dt>
<dd>The cell's height; this is always in pixels. <strong>Please don't use this.</strong> We prefer for cell sizes to be determined automatically, except in exceptionally rare cases.</dd>
<dt>Word Wrap</dt>
<dd>Specifies whether or not the cell's contents should be permitted to wrap. This should almost always be left at "Yes", the default.</dd>
<dt>Horizontal Alignment</dt>
<dd>Allows you to set the horizontal alignment for the cell's or cells' contents. This should almost always be left at the default.</dd>
<dt>Vertical Alignment</dt>
<dd>Lets you set the vertical alignment of the cell or cells. This should nearly always be left at the default, but may be adjusted if necessary.</dd>
<dt>Cell Type</dt>
<dd>Lets you specify whether the cell or cells contain data or header information. Making a row a header row gives it header styling that stands out from the data within the table.</dd>
<dt>Rows Span</dt>
<dd>Lets you specify how many rows the cell should take up within the table. Rarely needed, but useful for certain types of table.</dd>
<dt>Columns Span</dt>
<dd>Lets you indicate how many columns the cell should occupy within the table. You should rarely need to use this option.</dd>
<dt>Background Color</dt>
<dd>Lets you specify a background color for the cell. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.</dd>
<dt>Border Color</dt>
<dd>Lets you specify a border color for the cel. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.</dd>
</dl>
<h3 id="Row_submenu" name="Row_submenu">行のサブメニュー</h3>
<p>The <strong>Row</strong> submenu gives you options you may use to adjust and refine the rows in your table:</p>
<p><img alt="Screenshot of the Table context menu's Row submenu" src="https://mdn.mozillademos.org/files/15309/Table%20context%20menu%20-%20Row%20submenu.png" style="height: 164px; width: 247px;"></p>
<p>These options are all straightforward:</p>
<ul>
<li><strong>Insert Row Before</strong> adds a new row before the current cursor position in the table</li>
<li><strong>Insert Row After</strong> adds a new row below the current row</li>
<li><strong>Delete Rows</strong> removes the row containing the insertion point, or all selected rows (or all rows on which you have selected cells)</li>
</ul>
<h3 id="Column_submenu" name="Column_submenu">列のサブメニュー</h3>
<p>The <strong>Column</strong> submenu lets you edit the columns in your table:</p>
<p><img alt="Screenshot of the Table context menu's Column submenu" src="https://mdn.mozillademos.org/files/15313/Table%20context%20menu%20-%20column%20submenu.png" style="height: 174px; width: 268px;"></p>
<p>These options mirror those in the row options menu:</p>
<ul>
<li><strong>Insert Column Before</strong> adds a new column to the left of the current cursor position in the table (or to the right in right-to-left languages)</li>
<li><strong>Insert Column After</strong> adds a new row to the right of the current location (or to the left in right-to-left languages)</li>
<li><strong>Delete Columns</strong> removes the column containing the insertion point, or all selected columns (or all columns in which you have selected cells)</li>
</ul>
<p>{{EditorGuideQuicklinks}}</p>
|
