diff options
Diffstat (limited to 'files/ja/learn/html/tables/basics/index.html')
| -rw-r--r-- | files/ja/learn/html/tables/basics/index.html | 569 |
1 files changed, 569 insertions, 0 deletions
diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..ec37b6ad39 --- /dev/null +++ b/files/ja/learn/html/tables/basics/index.html @@ -0,0 +1,569 @@ +--- +title: HTML の表の基本 +slug: Learn/HTML/Tables/Basics +tags: + - Beginner + - CodingScripting + - HTML + - Learn + - basics + - col + - colgroup + - colspan + - header + - row + - rowspan + - セル + - テーブル + - 記事 +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>基本的に HTML 表に親しむこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_table" name="What_is_a_table">テーブルとは何か</h2> + +<p>テーブルとは、行と列からなる構造化されたデータの集合 (<strong>表形式データ</strong>) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1日または1週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。</p> + +<h3 id="How_does_a_table_work" name="How_does_a_table_work">テーブルはどのように動作するか</h3> + +<p>テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。</p> + +<table> + <caption>太陽系の惑星のデータ (<span class="tlid-translation translation" lang="ja"><span title="">惑星の事実は「<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa の惑星情報シート - メートル法</a>」から引用</span></span>)</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">名前</th> + <th scope="col">質量 (10<sup>24</sup>kg)</th> + <th scope="col">直径 (km)</th> + <th scope="col">密度 (kg/m<sup>3</sup>)</th> + <th scope="col">重力 (m/s<sup>2</sup>)</th> + <th scope="col">一日の長さ (hours)</th> + <th scope="col">太陽からの距離 (10<sup>6</sup>km)</th> + <th scope="col">平均気温 (°C)</th> + <th scope="col">月の数</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">地球型惑星</th> + <th scope="row">水星</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>太陽に一番近い</td> + </tr> + <tr> + <th scope="row">金星</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">地球</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>私たちの世界</td> + </tr> + <tr> + <th scope="row">火星</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>赤い惑星</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">木星型惑星</th> + <th rowspan="2" scope="rowgroup">巨大ガス惑星</th> + <th scope="row">木星</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>最大の惑星</td> + </tr> + <tr> + <th scope="row">土星</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">巨大氷惑星</th> + <th scope="row">天王星</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">海王星</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup"><span class="tlid-translation translation" lang="ja"><span title="">矮星</span></span></th> + <th scope="row">冥王星</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>2006年に惑星として分類されなくなりましたが、これは<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">物議を醸しています</a>。</td> + </tr> + </tbody> +</table> + +<p>正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。</p> + +<h3 id="Table_styling" name="Table_styling">表のスタイル付け</h3> + +<p>GitHub の<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ライブサンプルもご覧ください</a>。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。</p> + +<p>幻想にふけってはいけません。テーブルを Web 上で有効にするには、<a href="/ja/docs/Learn/CSS">CSS</a> でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に<a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表のスタイリング</a>の記事を参照してください。</p> + +<p>このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">スタイルシートはここ</a>で、そしてスタイルシートを適用する <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML テンプレート</a>も見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。</p> + +<h3 id="When_should_you_NOT_use_HTML_tables" name="When_should_you_NOT_use_HTML_tables">HTML の表を使用するべきではない場面</h3> + +<p>HTML テーブルは表形式のデータに使用する必要があります - これがそれらが設計されているものです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む1行、コンテンツ列を含む1行、フッターを含む1行などです。<a href="/ja/docs/Learn/Accessibility">アクセシビリティ学習モジュール</a>の<a href="/ja/docs/Learn/Accessibility/HTML#Page_layouts">ページレイアウト</a>でより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザ間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。</p> + +<p>つまり、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。</p> + +<ol> + <li><strong>レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。</strong>視覚障害者が使用する<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">スクリーンリーダー</a>は、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。</li> + <li><strong>テーブルはタグスープを生成します。</strong>前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。</li> + <li><strong>テーブルは自動的には応答しません。</strong>適切なレイアウトコンテナ ({{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}}、{{htmlelement("div")}}など) を使用する場合、その幅はデフォルトで親要素の100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table" name="Active_learning_Creating_your_first_table">アクティブラーニング: 最初の表の作成</h2> + +<p>テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。</p> + +<ol> + <li>まず最初に、ローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>すべてのテーブルの内容は、<strong><code><a href="/ja/docs/Web/HTML/Element/table"><table></table></a></code></strong> という2つのタグで囲まれています。HTML のボディの中にこれらを追加してください。</li> + <li>テーブル内の最小のコンテナは、<strong><code><a href="/ja/docs/Web/HTML/Element/td"><td></a></code></strong> 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>4行のセルが必要な場合は、これらのタグを3回コピーする必要があります。テーブルの内容を次のように更新します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 <code><td></code> 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。</p> + +<p>この行が大きくなるのを防ぎ、後続のセルを2行目に配置するには、<strong><code><a href="/ja/docs/Web/HTML/Element/tr"><tr></a></code></strong> 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。</p> + +<ol> + <li>以下のように、既に作成した4つのセルを <code><tr></code> タグ内に配置します。 + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>1行作成したら、あと1、2行作成してみましょう。各行は追加の <code><tr></code> 要素で囲み、各セルを <code><td></code> に含める必要があります。</li> +</ol> + +<p>これにより、テーブルは次のようになります。</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: GitHub では <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> としても見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">こちらも参照してください</a>)。</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements" name="Adding_headers_with_<th>_elements"><th> 要素による見出しの追加</h2> + +<p>それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>実際にレンダリングされたテーブルは次のとおりです。</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。</p> + +<h3 id="Active_learning_table_headers" name="Active_learning_table_headers">アクティブラーニング: 表の見出し</h3> + +<p>このテーブルを改良してみましょう。</p> + +<ol> + <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h3 id="Why_are_headers_useful" name="Why_are_headers_useful">なぜ見出しは便利なのか</h3> + +<p>私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。</p> +</div> + +<p>テーブルヘッダには、<code>scope</code> 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns" name="Allowing_cells_to_span_multiple_rows_and_columns">セルを複数の行や列で結合できるようにする</h2> + +<p>セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。</p> + +<p>最初のマークアップは次のようになります。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Animals<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Hippopotamus<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Horse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Mare<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Stallion<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Crocodile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Chicken<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Hen<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Rooster<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>しかし、出力結果は私たちが望むものではありません。</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>"Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成し、"Horse" と "Chicken" を2列にまたがって作成する方法が必要です。幸いなことに、テーブルのヘッダーとセルには <code>colspan</code> 属性と <code>rowspan</code> 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、<code>colspan="2"</code> を指定すると、セルは2列にまたがります。</p> + +<p>このテーブルを改善するために <code>colspan</code> と <code>rowspan</code> を使用しましょう。</p> + +<ol> + <li>まず、ご使用のローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。</li> + <li>次に、<code>colspan</code> を使用して "Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成します。</li> + <li>最後に、<code>rowspan</code> を使用して "Horse" と "Chicken" を2行にまたがるようにします。</li> + <li>改善を確認するには、ブラウザでコードを保存して開きます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + +<p>次の簡単な例を見てください。</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>これにより、次のような出力結果が得られます。</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>列内の3つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは3つすべてに <code>class</code> を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、<code><col></code> 要素で情報を1回指定できます。<code><col></code> 要素は、開始 <code><table></code> タグのすぐ下の <code><colgroup></code> コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>事実上、2つの "スタイル列" を定義しています。1つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の <code><col></code> 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。</p> + +<p>両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ1つの <code><col></code> 要素を含めるだけで済みます。</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p><code>colspan</code> や <code>rowspan</code> と同じように、<code>span</code> はスタイルを適用したい列の数を指定する単位なしの数値を取ります。</p> + +<h3 id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col">アクティブラーニング: colgroup と col</h3> + +<p>今こそ自分でやってみるべき時です。</p> + +<p>以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>以下の手順に従ってテーブルを再作成してください。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。</li> + <li><code><col></code> 要素を追加することができる <code><table></code> タグのすぐ下のテーブルの上部に <code><colgroup></code> 要素を追加します (以下の残りの手順を参照)。</li> + <li>最初の2つの列はスタイルなしのままにする必要があります。</li> + <li>3列目に背景色を追加します。<code>style</code> 属性の値は<code>background-color:#97DB9A;</code> です。</li> + <li>4列目に別の幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> + <li>5列目に背景色を追加します。<code>style</code> 属性の値は <code>background-color: #97DB9A;</code> です。</li> + <li>これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6番目の列に異なる背景色と境界線を追加します。<code>style</code> <span class="tlid-translation translation" lang="ja"><span title="">属性の値は </span></span><code>background-color:#DCC48E; border:4px solid #C1437A;</code><span class="tlid-translation translation" lang="ja"><span title=""> です。</span></span></li> + <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code><br> + 最後の2日間は空き日なので、背景色を設定せずに幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> +</ol> + +<p>例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> として GitHub に私たちのバージョンを見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">それもライブを見てください</a>)。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。</p> + +<p>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> |