آموزش HTML - جدول‌های تو در تو

جدول‌های تو در تو

جدول‌های تو در تو در HTML به جدول‌هایی گفته می‌شود که یک یا چند جدول دیگر در داخل آن‌ها قرار گرفته‌اند؛ جدول‌های داخلی درون تگ <td> قرار می‌گیرند. در جدول‌های تو در تو، از یک جدول درون جدول دیگر استفاده می‌شود که روشی انعطاف‌پذیر برای سازمان‌دهی چیدمان‌های پیچیده داده‌ها فراهم می‌کند. عناصر مختلف، از جمله سایر تگ‌های HTML، می‌توانند درون سلول‌های جدول (<td>) قرار بگیرند.

نه‌تنها می‌توان جدول‌ها را به‌صورت تو در تو قرار داد، بلکه می‌توان از تگ‌های مختلف HTML نیز درون تگ <td> (سلول داده‌های جدول) برای مرتب‌سازی و سازمان‌دهی محتوا استفاده کرد.

ساختار اولیه جدول‌های تو در تو

جدول‌های تو در تو به روشی گفته می‌شود که در آن، ساختار کامل یک جدول درون یکی از سلول‌های جدول دیگری قرار می‌گیرد. این تکنیک امکان ایجاد چیدمان‌های پیچیده‌تر و سازمان‌یافته‌تر را در HTML فراهم می‌کند.

به تصویر زیر توجه کنید که نحوه نمایش یک جدول تو در تو را نشان می‌دهد؛ یعنی ساختار جدول‌های تو در تو را به تصویر می‌کشد:

چگونه یک جدول تو در تو ایجاد کنیم؟

می‌توانید در HTML با ایجاد یک یا چند جدول در سلول‌های مختلف جدول، یک جدول تو در تو بسازید. مراحل ایجاد یک جدول تو در تو در HTML به شرح زیر است:

مرحله ۱: ایجاد جدول بیرونی

با ایجاد جدول بیرونی شروع کنید؛ این جدول نقش ظرف یا محفظه اصلی را ایفا می‌کند.

<table border="1">
   <!-- Outer table content -->
</table>

مرحله ۲: تعریف سطرها و ستون‌ها

درون جدول بیرونی، سطرها و ستون‌های موردنیاز را تعریف کنید.

<tr>
   <td>
      <!-- Content within the cell -->
   </td>
</tr>

مرحله ۳: قرار دادن جدول داخلی

درون سلول، با استفاده از تگ‌های <table> یک ساختار جدول جدید قرار دهید.

<td>
   <table border="1">
      <!-- Inner table content -->
   </table>
</td>

مرحله ۴: تعریف محتوای جدول داخلی

درون جدول داخلی، سطرها و ستون‌های موردنیاز را تعریف کنید.

<tr>
  <td>Inner Content</td>
</tr>

مرحله ۵ - بستن تگ‌ها

اطمینان حاصل کنید که تمام تگ‌های HTML به‌درستی بسته شده‌اند.

</table>

مثالی از جدول‌های تو در تو

در ادامه، مثالی ارائه شده است که مراحل بالا را دنبال می‌کند −

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

جدول‌ها درون سلول‌ها

می‌توان جدول‌ها را درون سلول‌های جدول‌های دیگر قرار داد و ساختارهای پیچیده‌ای ایجاد کرد.

مثال

مثال زیر جدولی با دو ستون (نام و حقوق) ایجاد می‌کند. درون ستون اول، یک جدول تو در تو قرار دارد که اطلاعات کارکنان را با همان ستون‌ها نمایش می‌دهد.

سطرهای عنوان و داده‌های جدول بیرونی تعریف شده‌اند و جدول داخلی، اطلاعات دو کارمند به نام‌های Ramesh Raman و Shabbir Hussein را به همراه حقوق مربوط به هرکدام نمایش می‌دهد.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

استایل‌دهی به جدول‌های تو در تو

برای بهبود ظاهر بصری جدول‌های تو در تو، می‌توانید مانند جدول‌های معمولی به آن‌ها استایل اعمال کنید. برای نوشتن استایل‌های CSS مربوط به جدول‌های تو در تو، کافی است قوانین CSS را روی انتخابگر 'table' اعمال کنید تا جدول بیرونی استایل‌دهی شود و از انتخابگر 'table table' برای استایل‌دهی به جدول‌های داخلی استفاده کنید.

مثال

کد زیر شامل یک جدول اصلی است که با ویژگی‌های CSS استایل‌دهی شده است. ویژگی `border-collapse` باعث می‌شود حاشیه‌ها به‌صورت یکپارچه نمایش داده شوند و ویژگی 'width: 100%' باعث می‌شود جدول با اندازه صفحه سازگار باشد. سلول‌ها (<td> و <th>) دارای فاصله داخلی، حاشیه و تنظیم تراز متن هستند.

علاوه بر این، جدول‌های تو در توی قرارگرفته درون سلول‌ها، استایلی متمایز شامل پس‌زمینه رنگی و حاشیه دارند. سلول داده در جدول اصلی، شامل یک جدول تو در تو با حاشیه آبی و عرض ۸۰ درصد است که با استفاده از 'margin: 10px auto' در مرکز قرار می‌گیرد.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Nested Tables with CSS Styles</title>
   <style>
      table {
         border-collapse: collapse;
         width: 100%;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
      /* Additional styles for nested tables */
      table table {
         border: 2px solid #3498db;
         width: 80%;
         margin: 10px auto;
      }
      table table td {
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

تصاویر در جدول‌های تو در تو

قرار دادن تصاویر در جدول‌های تو در تو، نمایش بصری محتوا را بهبود می‌بخشد. برای ادغام یکپارچه تصاویر در چیدمان‌های پیچیده‌ای مانند جدول‌های تو در تو، از تگ <img> درون سلول‌های جدول استفاده کنید.

مثال

مثال زیر نحوه استفاده از تصاویر درون جدول‌های تو در تو را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Image </th>
                  <th>Name</th>
               </tr>
               <tr>
                  <td>
                     <img src="images\logo.png" alt="Nested Image">
                  </td>
                  <td>LOGO </td>
               </tr>
               <tr>
                  <td>
                     <img src="images\html5_icon.png" alt="Nested Image">
                  </td>
                  <td>HTML5 </td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

مزایای جدول‌های تو در تو

مزایای جدول‌های تو در تو عبارت‌اند از −

• چیدمان‌های سازمان‌یافته − جدول‌های تو در تو امکان ایجاد چیدمان‌های منظم و ساختاریافته را فراهم می‌کنند و نمایش داده‌های پیچیده را بهبود می‌بخشند.

• شخصی‌سازی سلول‌ها − هر سلول در یک جدول تو در تو می‌تواند محتوای متنوعی، از جمله متن، تصویر یا حتی جدول‌های تو در توی دیگر را در خود جای دهد.

• طرح‌های پیچیده − با قرار دادن جدول‌ها درون سلول‌ها می‌توان الگوهای طراحی پیچیده‌ای ایجاد کرد که انعطاف‌پذیری بیشتری در طراحی صفحات وب فراهم می‌کنند.