رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت یک جدول تو در تو در اچ تی ام ال
#1
سلام خسته نباشید
یک سوال داشتم:

من چطور میتونم جدولی بسازم که درونش جدول دیگه وجود داشته باشه؟
مثلا فرض کنیم جدولی داریم که
نام     فامیل     کد
کاربران رو نشون میده. حالا اگر کاربر روی هرکدام از سطرها کلیک کنه در زیر اون سطر جدول دیگه باز شه و اطلاعات بیشتری در مورد اون کاربر رو نمایش بده.

من خودم با شناختی که از جدوال در html دارم انتظار داشتم که به سادگی بتونم درون هرکدام از row ها که میخواهم با تگ table جدول دیگه ای رو شروع کنم اما اینکار شدنی
نیست و نتیجه ی حاصل را برام نداره . اگه هم جدول رو درون td بگذارم که فقط به اندازه ی یکی از خونه های جدول جا میگیره که چیزی نیست که من می خوام.
در واقع جدول درونی کاملا هم اندازه با جدول بیرونیه.

این هم کدی است که من برای برآورده کردن این نیاز نوشته ام اما متاسفانه کار نمی کند در حالیکه طبق منطق من و شناخت من از جدول در html این باید بدون مشکل کار کند:


<html> 
<body > 

<table border="1">
  <tr>
    <td>name</td>
    <td>family</td>
    <td>code</td>
  </tr> 
<!-- یک سطر عادی -->
  <tr>
    <td>akbar</td>
    <td>akbari</td>
    <td>15</td>
  </tr>

<!-- یک سطر که یک جدول در درون خود دارد -->
  <tr>
    <td>ali</td>
    <td>alizade</td>
    <td>12</td>
  </tr>
  <tr>
    <table>
      <tr>
        <td>age</td>
        <td>father</td>
        <td>mother</td>
      </tr> 
      <tr>
        <td>25</td>
        <td>mohamad</td>
        <td>zahra</td>
      </tr>
    </table>
  </tr>
<!-- یک سطر عادی دیگر -->
  <tr>
    <td>mahmood</td>
    <td>mahmoodi</td>
    <td>155</td>
  </tr>



</table>

</body>
</html>



اگر چنانچه کد را اجرا کنید می بینید که سطر اخر حتی جز جدول حساب نمی شود و دورش خط کشیده نمی شود.

خیلی ممنون میشوم اگر لطف کرده بنده را راهنمایی کنید
سپاسگزارم
پاسخ
تشکر شده توسط:
#2
جدول تودرتو مشکلی نداره. این کد رو تست کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>
      <p>This is a paragraph</p>
      <p>This is another paragraph</p>
    </td>
    <td>This cell contains a table:
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td>C</td>
          <td>D</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>This cell contains a list
      <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>pineapples</li>
      </ul>
    </td>
    <td>HELLO</td>
  </tr>
</table>

</body>
</html>

به مشخصه‌ی HTML5 دقت کنید:
<!DOCTYPE html>
پاسخ
تشکر شده توسط:




کاربران در حال بازدید این موضوع: 1 مهمان