HTML جدول مساعدة عدد بالتناوب الخلايا

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

سؤال

ما هي HTML المناسبة إذا أردت أن تتناوب عدد الخلايا في كل صف؟ أريد 2 خلايا غير الصف 1 و 3 في الصف 2، و 2 في 3، 3 في 4 الخ ... على غرار جدار من الطوب. لدي هذا حتى الآن، لكنه لا يجعل مثل أود. وأنا أعلم أنني يمكن أن تفعل هذه الجداول التعشيش، ولكن يمكنني أن أفعل هذا مع طاولة واحدة؟ 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>
هل كانت مفيدة؟

المحلول

وأنت لا يمكن أن يكون خلية تمتد بعرض كسور. بدلا من ذلك، كنت بحاجة إلى العثور على القاسم المشترك الأدنى لعدد الصفوف في النطاقات الدنيا والعليا. في المثال الخاص بك و 2 و 3، والتي هي 6 - ذلك الجدول الخاص بك هو 6 خلايا واسعة، حتى مع الصفوف التي تغطي 3 لكل منهما والصفوف الفردية التي تغطي 2 كل 

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

ملاحظة عرض الجدول يقبل القسمة بسهولة عن طريق 2 و 3، ويتم تعيين صراحة الاعراض في كل خلية.

نصائح أخرى

واحد طريقة للقيام بذلك سيكون عبر CSS. سوف تقوم بإعداد جدول كبير كما كنت في حاجة إليها (4X4، على سبيل المثال)، ثم تطبيق نمط إلى كل خلية حسب الاقتضاء. لن يكون هناك اثنين من الأساليب والطوب وفارغة، واحدة يدل على "الطوب" وغيرها مما يدل على المساحة الفارغة.

وهكذا، هل يمكن أن تفعل شيئا مثل ما يلي: 

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>

وأنا متأكد من أن colspans يجب أن يكون قيمة عددية، لا يسمح الكسور. قد تتمكن من محاولة مضيفا خلية وهمية مع 0 عرض، 0 الحشو، 0 الهامش على خط 3-الخلية. 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top