تحديد نطاق الصفوف على colgroup؟
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
سؤال HTML بسيط (آمل).
لنفترض أن لدي مجموعة أعمدة تمتد على 3 أعمدة.ولكنه يمتد أيضًا إلى 9 صفوف.لكن في الواقع، أريد أن يكون هناك 3 مستويات من الأعمدة (أي 3 أعمدة، مقسمة على 9 صفوف).الأهداف الوحيدة حقا هي:
أ) تجنب تضمين الجداول (لأسباب مختلفة) ب) الحفاظ على الأقسام معيارية.ج) السماح بتصميم المناطق المعيارية الدلالية.
لذا في النهاية، أود أن أحصل على شيء بصريًا مثل:
| 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 |
لقد تمكنت من جعل مجموعات الأعمدة تعمل على الاحتفاظ بالأعمدة الثلاثة معًا، ولكن فشلت محاولة إضافة "نطاق الصفوف". ولم تكن محاولة تغليف مجموعات الصفوف في علامات tr جيدة على الإطلاق.وبقدر ما أقول، لا توجد علامة "مجموعة صفوف" حقيقية.
تحديث:
بعد الحصول على ردود الفعل، أدركت أنني يجب أن أقدم المزيد من التفاصيل حول ما يدور في ذهني.
سأستخدم المصطلح رباعي، عمود فائق، صف فائق للإشارة إلى مجموعات البيانات.لذا خذ هذا المثال:
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، والنطاق، وما إلى ذلك.
المحلول
وبالنظر إلى أن <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>
نصائح أخرى
و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>
وأنا يستند هذا على المعلومات من HTML 5 المواصفات ولكن يجب أن تكون صالحة HTML 4 أيضا.
إذا كنت أتذكر بشكل صحيح، العلامة <colgroup> لا يعمل بشكل صحيح في أي متصفح (حسنا، ربما أوبرا). وأود أن تجنب بأي ثمن.
إذا كنت أنت، فما استقاموا لكم فاستقيموا مجرد تقديم جدول بسيط حيث يمثل كل <td> في "رباعية"، ثم جعل جدول داخل تلك الخلية لبقية البيانات.
والطريقة الصحيحة لغويا هي الجداول المتداخلة، في الواقع. سبيل المثال لديه جدول 2X2 الكواد وكل رباعية هو جدول 3X3 القيم. لا يوجد شيء خاطئ لغويا مع استخدام جدول متداخل لهذا الغرض. لا يحصل الخلط فوق الحشد مكافحة متداخلة أتش تي أم أل الجدول. ما له علاقة باستخدام الجداول المتداخلة للتخطيط الصفحة.
وعن طريق الجداول المتداخلة يتيح لك ايضا المزيد من السيطرة على CSS التصميم. باستخدام الأكواد و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>
بعد ذلك، يمكنك استهداف مجموعات المجموعات المختلفة بسهولة في CSS:
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
يحرر: أنا أحب كيف روري فيتزباتريك يستخدم أجسام جدول متعددة.إذا كان هذا صحيحًا بالفعل، فسأختار هذا الحل وأضع اسم فئة على كل علامة نصية للجدول.سيبقى CSS كما هو
