• 0

لا يمكن ترتيب الصفوف في جدول بـ HTML

انا مبتدئ برمجة وبدرس HTML،  بشوف الشرح واعمل تكليفات للدروس لتأكيد فهم الدرس ولكن فيه تكليف لعمل Table في HTML جربت اعمله وقفت معايا حاجة بسيطه مش عارف احلها 

دا كود والنتيجة بتاعة التكليف فيه اخر صف دا مش نازل لوحده وجاي جمب الصف التاني ممكن حل؟

والصورة دي الشكل المطلوب عمله

html-assigns-15-to-18.thumb.png.8c89490b2f781bdb26ffc0f65a890876.png

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

المشكلة لديك في ترتيب الأكواد التالية 

<tr>
  <td rowspan="2">Monsters</td>
  <td rowspan="2"><img src="https://via.placeholder.com/40/000"></td>
  <td rowspan="2">Mohamed Hany</td>
  <td rowspan="2">m@nn.sa</td>
  <td rowspan="2">&reg;</td>
  <td rowspan="2"><a href="#">Profile</td>
</tr>

لقد عالجت لك المشكلة في وضع أكواد الصف الثاني داخل  وسم tbody آخر ليظهر بالشكل المطلوب تنفيذه ، بهذا الشكل 

<tbody>
  <tr>
    <td rowspan="2">Monsters</td>
    <td rowspan="2"><img src="https://via.placeholder.com/40/000"></td>
    <td rowspan="2">Mohamed Hany</td>
    <td rowspan="2">m@nn.sa</td>
    <td rowspan="2">&reg;</td>
    <td rowspan="2"><a href="#">Profile</td>
  </tr>
</tbody>

حاول دائماً ترتيب الأكواد ليسهل عليك فهم المشكلة ، يمكنك الاطلاع على النتيجة أرفقت لك الملف بعد التعديل index.html .

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 2

يمكنك أن تستخدم أكثر من عنصر tbody كما وضح المدرب أسامة، ويمكنك أن تستخدم الصفوف فقط للقيام بهذه المهمة أيضًا، على النحو التالي:

<table border="2" width="100%">
    <thead>
        <tr>
            <th>Group</th>
            <th>Avatar</th>
            <th>Name</th>
            <th>Email</th>
            <th>Character</th>
            <th>Profile</th>
        </tr>
    </thead>
    <tbody>

        <!-- المجموعة الأولى -->
        <tr>
            <td rowspan="3">Ninja</td>
            <td rowspan="2"><img src="https://via.placeholder.com/40/f00" alt=""></td>
            <td rowspan="2">Osama mohamed</td>
            <td>o1@nn.sa</td>
            <td rowspan="2">@</td>
            <td rowspan="2"><a href="#">Profile</a></td>
        </tr>
        <tr>
            <td>o2@nn.sa</td>
        </tr>
      
        <tr>
            <td><img src="https://via.placeholder.com/40/00f" alt=""></td>
            <td>Saed Zareef</td>
            <td>S@nn.ss</td>
            <td>&trade;</td>
            <td><a href="#">Profile</a></td>
        </tr>
      
        <!-- المجموعة الثانية -->
        <tr>
            <td>Monsters</td>
            <td><img src="https://via.placeholder.com/40/000" alt=""></td>
            <td>Mohamed Hany</td>
            <td>m@nn.sa</td>
            <td>&reg;</td>
            <td><a href="#">Profile</a></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">Total members </td>
            <td>3</td>
        </tr>
    </tfoot>
</table>

لاحظ كيف أن كل صف tr في المجموعة الأولى يحتوي على عدد معين من عناصر td، وذلك للسماح للخلايا بالتوسع وأخذ مساحة أكثر من صف rowspan.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

شكرا جدا علي تقديمكم للمساعده

وانا توصلت لحل تالت وهو اني احذف خاصية الrowspan لآخر صفين وتتحل المشكله

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن