设置行跨度上COLGROUP?(Setting rowspan on colgroup?)

2019-07-28 20:59发布

简单(我希望),HTML问题。

比方说,我有一个跨越3列的列组。 但它也跨越了9行。 但在现实中,我希望这是3级列(所以基本上,3列,横跨9行分开)。 唯一的目标真的是:

一)避免嵌入表(各种原因)b)保持所述部分模块化的。 三)允许语义模块领域的造型。

所以,最后,我想有一些视觉上这样的:

   | 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列在一起,而是企图增加“行跨度” failed.Trying包裹行组在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。

所以,在四1中的数据是所有相关的,而在超第1行中的数据被所有相关的,并且在超第1栏的数据是所有有关。 因此,使用上面的数据,

“A”与“F”,“C”和“G”,而是“F”,“C”的直接关系,和“G”具有彼此没有直接关系。

思考它的另一种方式是数独,其中每个四,列和行包含组1-9,作出任何直接相关的任何其他数据的81个数据点的点这股行,列或四带,但没有任何数据点。

快速更新:

最后一两件事,抱歉。 这一点很重要,这样,应该有人可以使用屏幕阅读器和非传统的浏览器,这些关系在语义上的HTML分组,就可以知道他们是在表中的任何给定的点,即“你是四路1,超级第1栏,第4列,超行1,行1的数据是“俄亥俄”“。

这使得造型,跨浏览器的兼容性,可访问所有容易得多,以及围绕这样一个移动的AccessKeys,适用范围等。

Answer 1:

鉴于<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> 



Answer 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为好。



Answer 3:

如果我没有记错,在<colgroup>标签不正确地在任何浏览器工作(当然,歌剧也许)。 我会避免不惜一切代价。

如果我是你,我只是做一个简单的表,其中每一<td>表示“四”,则会使该单元格的数据的其余部分中的表。



Answer 4:

语义正确的做法是嵌套表格,其实。 你举的例子有四边形的2×2表,每个四是值的3x3的表格。 没有什么语义错误使用嵌套表这一点。 不要过度反嵌套的HTML表的人群感到困惑。 这与使用嵌套的表格进行页面布局做。

使用嵌套表格,还可以对CSS样式更多的控制。 使用列和colgroups只给你很有限的造型控制。 你可以在一个山坳或COLGROUP设置的唯一的CSS属性是边框,背景,与和知名度。



Answer 5:

我认为,最简单的就是一起跳过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>

然后,您可以在CSS轻松地定位不同的colgroups:

.colgroup1 th {
   // Styles here
}

.colgroup2 th {
   // Styles here
}


.colgroup3 th {
   // Styles here
}

// Same for tds.

编辑:我怎么样罗里·菲茨帕特里克使用多台体。 如果这确实是有效的,那么我会与解决方案去,只是把一个类名的每个表上body标签。 该CSS将保持不变



文章来源: Setting rowspan on colgroup?