Rowspanとは何ですか?
rowspan属性はハイパーテキストマークアップ言語(HTML)機能で、Webページのテーブルセルを複数の行に拡張できます。 HTMLは、Webページが作成される主な方法の1つです。 通常、Webブラウザーは、Webサイトから送信されたHTMLをデコードし、読み取り可能な形式でコンピューター画面に結果を表示します。 HTMLには、ページのコンテンツを整理するためのテーブルの概念が組み込まれています。
テーブルには、情報を垂直および水平に編成する複数の行と列があります。 HTMLテーブルを表示するとき、多くの場合、単一のコンテンツアイテムを複数の行に適用または分散したいことがあります。 テーブルでは、rowspan = N(Nは2、3などの数値)は、セルがその数の行に広がっていることを示します。
売上データが、販売地域、地域を代表する人物、売上金額という3つの列見出しを持つテーブルとして表示される例を考えてみましょう。 南部地域では、記録期間中に頭が変わりました。 それぞれの金額は両方の人に帰属します。 次のコードはこれを実現します。
<html>
<table border = "1">
<tr>
<th>地域</ th>
<th>ヘッド</ th>
<th>販売</ th>
</ tr>
<tr>
<td>東</ td>
<td>ルイス</ td>
<td> $ 2,100 </ td>
</ tr>
<tr> <td rowspan = "2">南</ td> <td>リリアン</ td> <td> $ 1,180 </ td> </ tr>
<tr> <td> Laverne </ td> <td> $ 1,300 </ td> </ tr>
<tr> <td> West </ td> <td> Larnoe </ td> <td> $ 1,900 </ td> </ tr>
</ table>
</ html>
この例では、テーブルが作成されます。 見出し「地域」、「ヘッドパーソン」、「営業」が指定され、その後に4行のデータが続きます。 テーブル内の各セルは、テーブルデータ(td)属性によって示されます。 Southのデータは2行にまたがるため、rowspan = 2を指定すると、Southという語は2行にまたがります。 次の行には、他のすべての行のように3つではなく、2つのtd属性のみがあります。
このコードをテキストファイルにコピーし、ブラウザに表示して効果を確認できます。 このコードには、営業担当者を簡単に識別できるように空白スペースが追加されていますが、必須ではありません。 以下は、1人のリリアンが南と西の2つの地域を率いるわずかに異なる例です。
<html>
<table border = "1">
<tr> <th> Region </ th> <th> Head </ th> <th> Sales </ th> </ tr>
<tr> <td>東</ td> <td>ルイス</ td> <td> $ 2,100 </ td> </ tr>
<tr> <td>南</ td> <td rowspan = "2">リリアン</ td> <td> $ 2,480 </ td> </ tr>
<tr> <td>西</ td> <td> $ 1,900 </ td> </ tr>
</ table>
</ html>
Webページでは、データを表形式で表示する必要がない場合があります。 会社名やロゴなどのヘッダー、上部または側部に1つ以上のメニュー、中央に主要情報などがあります。 このようなWebページを作成する際、多くの場合、読者が気付かないうちにテーブル構造が使用されます。 スムーズな効果を得るために、コンテンツの一部が複数の行に広がる場合は常にrowspan属性が使用されます。
たとえば、家族、キャリア、コミュニティの3つの情報列を含む個人用Webページを作成する場合があります。 各列には、簡単な紹介、写真、および詳細を含めることができます。 ページの見栄えを良くするために、右側に沿って色の帯を使用できます。 この場合、rowspan機能を使用して、色の帯がすべての行にまたがることを示すことができます。