콜 그룹에서 로우 스팬을 설정 하시겠습니까?
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
간단한 (희망), 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"을 추가하려는 시도가 실패했습니다. 트레드 그룹을 랩핑하는 것은 전혀 좋지 않았습니다. 그리고 내가 말하는 한, 실제 "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 |
단순화를 위해, 상단에 걸쳐 Super -Col 1-6을 썼다고 상상해보십시오.
따라서 쿼드 1의 데이터는 모두 관련되어 있고 Super-Row 1의 데이터는 모두 관련되어 있으며 Super-Col 1의 데이터는 모두 관련되어 있습니다. 따라서 위의 데이터를 사용하여
'a'는 'f', 'c'및 'g'와 직접적인 관계를 가지고 있지만 'f', 'c'및 'g'는 서로 직접적인 관계가 없습니다.
그것에 대해 생각하는 또 다른 방법은 스도쿠입니다. 각 쿼드, 열 및 행은 1-9 세트를 포함하여 81 개의 데이터 포인트 중 하나가 행, 열 또는 쿼드와 직접 공유하는 다른 데이터 포인트와 직접 관련되어 있습니다. 그러나 데이터 포인트가 아닙니다.
빠른 업데이트:
마지막으로, 죄송합니다. 이러한 관계를 HTML로 의미 적으로 그룹화하여 누군가가 스크린 리더 또는 비 전통적인 브라우저를 사용하는 경우 주어진 지점에서 테이블에있는 위치를 알 수 있습니다. Col 1, 4 열, Super Row 1, Row 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>다른 팁
ㅏ <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>
나는 이것을 The의 정보를 기반으로한다 HTML 5 사양, 그러나 유효한 HTML 4이어야합니다.
내가 정확하게 기억한다면, <colgroup> 모든 브라우저에서 태그가 제대로 작동하지 않습니다 (음, 오페라). 나는 모든 비용으로 그것을 피할 것입니다.
내가 당신이라면, 나는 단지 각각의 간단한 테이블을 만들 것입니다 <td> "쿼드"를 나타내고 나머지 데이터의 셀 내에 테이블을 만듭니다.
의미 적으로 올바른 방법은 실제로 중첩 된 테이블입니다. 예제에는 2x2 쿼드 테이블이 있으며 각 쿼드는 3x3 값 테이블입니다. 이것을 위해 중첩 테이블을 사용하는 데 의미 적으로 잘못된 것은 없습니다. 뉴스 NeSted-HTML-Table 군중에 대해 혼란스러워하지 마십시오. 그것은 페이지 레이아웃에 중첩 테이블을 사용하는 것과 관련이 있습니다.
중첩 테이블을 사용하면 CSS 스타일을 더 많이 제어 할 수 있습니다. Cols와 Colgroup을 사용하면 스타일 컨트롤이 매우 제한됩니다. Col 또는 Colgroup에서 설정할 수있는 유일한 CSS 속성은 테두리, 배경 및 가시성입니다.
가장 쉬운 것은 콜로 그룹 요소를 모두 함께 건너 뛰고 대신 간단한 클래스 스타일로 가야한다고 생각합니다.
<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에서 다른 콜 그룹을 쉽게 타겟팅 할 수 있습니다.
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
편집하다: 나는 방법을 좋아한다 로리 피츠 패트릭 여러 테이블 바디를 사용합니다. 그것이 실제로 유효하다면, 나는 해당 솔루션을 사용하여 각 테이블 본체 태그에 클래스 이름을 넣습니다. CSS는 동일하게 유지됩니다
