設定rowspanにcolgroup?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
簡単なんで、HTMLます。
ということかしてカラムグループが広が3列あります。でも広9さい。が、実際にありたいと思いますする3レベルのカラム（基本的には、3つの柱に分割9rows).唯一の目的は:
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タグのない良好です。どうかありませんリアル"rowgroup"タグです。
更新:
後のフィードバックの実現に向け、まだまだ私の詳細は何をしています。
私は、クアッドスーパー-カラムは、スーパー列を参照グループのデータです。その例:
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.
そのデータquad1は、すべての関連のデータをスーパー列1がすべての関連のデータをスーパー列1がします。なので、上記のデータ
'a'は直接関係の前に'f','C'、'G'、'f','C'、'G'のない直接の関係を生むものである。
別の言い方を考えでパズル、クアッドの列と行のセットの1-9ので、他の81データポイントとは直接関連、その他のデータポイントの株式、列、クアッドがない任意のデータポイント。
迅速に更新:
最後にひとつ、残念ですで重要なこれらの関係するグループ化を意味的には、HTMLのように、誰かをスクリーンセーバーまたは非伝統的なブラウザで知られるテーブルでは任意の地点で、"すQuad1、スーパー列1列4、スーパー列を1行に1.のデータが'オハイオ州の'."
このスタイリング，クロスブラウザの互換性、アクセスのすべてではないでしょうかどの移動などのAccessKeys範囲等
解決
この <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>
ることができま風quadsを保ちながら清潔で、セマンティック構造です。なんなのかどのくらいの柔軟性だけスタイリングがありますプロジェクトに追加:
<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>他のヒント
A <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>
I基本情報から HTML5のスペック, がで有効なHTML4です。
もし私の記憶が正し、 <colgroup> タグのない作業を適切に利用、オペラか).いないようです。
また、ただただ単純にテーブルが各 <td> を表す"quad"、をテーブル名で大文字と小文字は区る細胞内シグナル伝達分子のためのデータです。
の意味的に正しい方向であるネストしたテーブル）を付けています。おの例では、2x2表quads各quadは3×3テーブルの値です。ある意味的に間違っているを入れ子表します。な混乱の防-nested-htmlのテーブルです。なニーズをネストしたテーブルのページです。
使用入れ子席もご利用いただけますさらに制御CSSスタイリング.使用colsとcolgroupsなければならないわけではなくだ非常に限られたスタイリング。のCSSプロパティで設定できる段はcolgroupは、国境を背景に、-視認性を高めています。
と思う最も簡単な方法はスキップのcolgroup要素が出ていると単純なクラススタイリングではなく:
<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>
そして、できる対象の異なるcolgroupsやCSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
編集： ように頼んだような--- ロリー Fitzpatrick 用途に複数のテーブル。とする場合は、実際に有効で、そっとそのソリューションと投入するだけで、簡単にクラス名は各テーブルbodyタグです。CSSの大きさに変更はありません
