1

単純な（私は願っています）、HTMLの質問。

3列にまたがる列グループがあるとしましょう。しかし、それはまた9行にまたがっています。しかし実際には、3つのレベルの列（つまり、基本的に3つの列、9つの行に分割）が必要です。唯一の目的は実際には次のとおりです。

a）（さまざまな理由で）テーブルの埋め込みを避けます。b）セクションをモジュール式に保ちます。c）意味的にモジュール化された領域のスタイリングを可能にします。

したがって、最終的には、視覚的に次のようなものになります。

   | col 1  | col 2 | col 3 |
   | row 1  | row 1 | row 1 |
   | row 2  | row 2 | row 2 |
   | row 3  | row 3 | row 3 |

   | col 4  | col 5 | col 6 |
   | row 4  | row 4 | row 4 |
   | row 5  | row 5 | row 5 |
   | row 6  | row 6 | row 6 |

   | col 7  | col 2 | col 3 |
   | row 7  | row 7 | row 7 |
   | row 8  | row 8 | row 8 |
   | row 9  | row 9 | row 9 |

列グループを機能させて3つの列をまとめることはできましたが、「rowspan」を追加する試みは失敗しました。行グループをtrタグでラップしようとしてもまったくうまくいきませんでした。そして私が言う限り、本当の「行グループ」タグはありません。

アップデート：

フィードバックを受け取った後、私は自分が考えていることについてもっと詳しく説明する必要があることに気づきました。

データのグループを指すために、quad、super-column、super-rowという用語を使用します。したがって、この例を見てください。

               Quad 1       Quad 2
super-row1 | a | b | c || d | e | f |
super-row2 | 1 | 2 | 3 || 4 | 5 | 6 |
super-row3 | A | B | C || D | E | F |

               Quad 3       Quad 4
super-row4 | g | h | i || j | k | l |
super-row5 | 7 | 8 | 9 || 0 | 1 | 2 |
super-row6 | G | H | I || J | K | L |

簡単にするために、上にスーパー列1〜6を書いたと想像してみてください。

したがって、クワッド1のデータはすべて関連しており、スーパー行1のデータはすべて関連しており、スーパー列1のデータはすべて関連しています。したがって、上記のデータを使用して、

「a」は「f」、「C」、および「G」と直接的な関係がありますが、「f」、「C」、および「G」は互いに直接的な関係はありません。

別の考え方として、数独があります。各クワッド、列、および行には1〜9のセットが含まれ、行、列、またはクワッドを共有する他のデータポイントに直接関連する81のデータポイントのいずれかを作成します。ただし、データポイントには適用されません。

クイックアップデート：

最後にもう1つ、ごめんなさい。これらの関係をHTMLで意味的にグループ化して、スクリーンリーダーや従来とは異なるブラウザを使用している場合に、任意の時点でテーブルのどこにいるかを知ることができるようにすることが重要です。列1、列4、スーパー行1、行1。データは「オハイオ」です。」

これにより、スタイリング、ブラウザ間の互換性、アクセシビリティがすべてはるかに簡単になり、AccessKeys、Scopeなどの移動も簡単になります。

4

5 に答える 5

10

<colgroup>それが列をグループ化する唯一のセマンティックな方法であり、行をグループ化する唯一のセマンティックな方法であることを考えると<tbody>、単純なものに固執することをお勧めします。

<table>
    <colgroup id="colgroup1">
        <col id="colA" />
        <col id="colB" />
    </colgroup>
    <colgroup id="colgroup2">
        <col id="colC" />
        <col id="colD" />
    </colgroup>
    <tbody id="rowgroup1">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row1">
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr id="row2">
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
        </tr>
    </tbody>
    <tbody id="rowgroup2">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row3">
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
            <td>D3</td>
        </tr>
        <tr id="row4">
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
            <td>D4</td>
        </tr>
    </tbody>
</table>

これにより、クリーンでセマンティックな構造を維持しながら、クワッドのスタイルを設定できます。スタイリングにどれだけの柔軟性があるかはわかりませんが、いくつかのオプションがあります。

<style type="text/css">
    table { border-collapse:collapse; font-family:sans-serif; font-size:small; }
    td, th { border:solid 1px #000; padding:2px 10px; text-align:center; }
    th { background-color:#000; color:#fff; font-size:x-small; }
    colgroup { border:solid 3px #000; }
    tbody { border:solid 3px #000; }
</style>


table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: small;
}
td,
th {
  border: solid 1px #000;
  padding: 2px 10px;
  text-align: center;
}
th {
  background-color: #000;
  color: #fff;
  font-size: x-small;
}
colgroup {
  border: solid 3px #000;
}
tbody {
  border: solid 3px #000;
}
<table>
  <colgroup id="colgroup1">
    <col id="colA" />
    <col id="colB" />
  </colgroup>
  <colgroup id="colgroup2">
    <col id="colC" />
    <col id="colD" />
  </colgroup>
  <tbody id="rowgroup1">
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
    <tr id="row1">
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
      <td>D1</td>
    </tr>
    <tr id="row2">
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
      <td>D2</td>
    </tr>
  </tbody>
  <tbody id="rowgroup2">
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
    <tr id="row3">
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
      <td>D3</td>
    </tr>
    <tr id="row4">
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
      <td>D4</td>
    </tr>
  </tbody>
</table>

于 2009-06-26T05:29:35.610 に答える
2

は、行グループを表す<table>複数の子を持つことができます。<tbody>私は<colgroup>以前にこの要素を使用したことがないので、他の誰かが追加するために残しますが、セマンティックを維持しながらスタイリングのニーズを達成できるソリューションを次に示します。

<table>
    <tbody>
        <tr>
            <th scope="col">col 1</th>
            <th scope="col">col 2</th>
            <th scope="col">col 3</th>
        </tr>
        <tr>
            <td>row 1</td>
            <td>row 1</td>
            <td>row 1</td>
        </tr>
        <tr>
            <td>row 2</td>
            <td>row 2</td>
            <td>row 2</td>
        </tr>
        <tr>
            <td>row 3</td>
            <td>row 3</td>
            <td>row 3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 4</th>
            <th scope="col">col 5</th>
            <th scope="col">col 6</th>
        </tr>
        <tr>
            <td>row 4</td>
            <td>row 4</td>
            <td>row 4</td>
        </tr>
        <tr>
            <td>row 5</td>
            <td>row 5</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row 6</td>
            <td>row 6</td>
            <td>row 6</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 7</th>
            <th scope="col">col 8</th>
            <th scope="col">col 9</th>
        </tr>
        <tr>
            <td>row 7</td>
            <td>row 7</td>
            <td>row 7</td>
        </tr>
        <tr>
            <td>row 8</td>
            <td>row 8</td>
            <td>row 8</td>
        </tr>
        <tr>
            <td>row 9</td>
            <td>row 9</td>
            <td>row 9</td>
        </tr>
    </tbody>
</table>

これはHTML 5 仕様の情報に基づいていますが、HTML 4 でも有効である必要があります。

于 2009-06-17T10:20:12.663 に答える
1

私の記憶が正しければ、<colgroup>タグはどのブラウザーでも正しく機能しません (まあ、Opera かもしれません)。私はそれを絶対に避けたいと思います。

私があなたなら、それぞれ<td>が「クワッド」を表す単純なテーブルを作成し、そのセル内に残りのデータ用のテーブルを作成します。

于 2009-06-30T09:15:04.573 に答える
1

意味的に正しい方法は、実際にはネストされたテーブルです。あなたの例にはクワッドの2x2テーブルがあり、各クワッドは値の3x3テーブルです。このためにネストされたテーブルを使用しても意味的に問題はありません。anti-nested-html-table の群集について混乱しないでください。これは、ページ レイアウトにネストされたテーブルを使用することに関係しています。

ネストされたテーブルを使用すると、CSS スタイルをより詳細に制御することもできます。cols と colgroups を使用すると、非常に限られたスタイル制御しかできません。col または colgroup に設定できる唯一の CSS プロパティは、border、background、with、および visibility です。

于 2009-07-01T08:13:40.480 に答える
0

最も簡単なのは、colgroup-element をすべてスキップして、代わりに単純なクラス スタイルを使用することだと思います。

<table>
    <tr class="colgroup1">
        <th>col1</th><th>col2</th><th>col3</th>
    </tr>
    <tr class="colgroup1">
        <td>row1</td><td>row1</td><td>row1</td>
    </tr>
    <tr class="colgroup1">
        <td>row2</td><td>row2</td><tr>row2</td>
    </tr>
    <tr class="colgroup2">
        <th>col4</th><th>col5</th><th>col6</th>
    </tr>
    <tr class="colgroup2">
        <td>row3</td><td>row3</td><td>row3</td>
    </tr>
    <tr class="colgroup2">
        <td>row4</td><td>row4</td><td>row4</td>
    </tr>
    <tr class="colgroup3">
        <th>col7</th><th>col8</th><th>col9</th>
    </tr>
    <tr class="colgroup3">
        <td>row5</td><td>row5</td><td>row5</td>
    </tr>
    <tr class="colgroup3">
        <td>row6</td><td>row6</td><td>row6</td>
    </tr>
</table>

次に、CSS でさまざまな colgroups を簡単にターゲットにすることができます。

.colgroup1 th {
   // Styles here
}

.colgroup2 th {
   // Styles here
}


.colgroup3 th {
   // Styles here
}

// Same for tds.

編集: Rory Fitzpatrickが複数のテーブル ボディを使用する方法が気に入っています。それが実際に有効である場合は、そのソリューションを使用して、各テーブルのボディ タグにクラス名を付けるだけです。CSSはそのまま

于 2009-06-17T10:23:36.540 に答える