قرار دادن دو جدول در کنار هم با استفاده از یک جدول بزرگتر

فرض کنید می خواهیم دو جدول را در یک سطر قرار دهیم. اگر بخواهیم دو تگ جدول را پشت سر هم استفاده کنیم، جدول دوم در سطر بعدی و زیر جدول اول قرار می گیرد.

برای حل این مشکل می توانید دو جدول مورد نظر را در یک جدول که آنها را در بر می گیرد قرار دهیم. در این صورت می توان دو جدول در یک سطر ایجاد کرد.

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

<table width="500" border="4"><!-- تگ آغازی جدول بیرونی -->
<td align="center"><!-- سلول اول در جدول بیرونی -->
<table width="400" border="2"><!-- آغاز جدول درونی -->
<td align="center"><!-- اولین سلول جدول درونی -->
محتویات جدول درونی
</td><!-- پایان سلول جدول درونی -->
</table><!-- پایان جدول درونی -->
</td><!-- پایان سلول جدول بیرونی -->
</table><!-- پایان جدول بیرونی -->

این هم جدول به دست آمده:

محتویات جدول درونی

به یاد داشته باشید که جدولهای درونی را باید در سلولهای جدول بیرونی قرار دهید یعنی بین <td> و <td/> در جدول بیرونی.

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

<table width="600" border="4"><!-- تگ آغازی جدول بیرونی -->
<td align="center"><!-- سلول اول در جدول بیرونی -->
<table width="250" border="2"><!-- آغاز جدول درونی -->
<td align="center"><!-- اولین سلول جدول درونی -->
محتویات اولین جدول درونی
</td><!-- پایان سلول اولین جدول درونی -->
</table><!-- پایان اولین جدول درونی -->
</td><!-- پایان اولین سلول جدول بیرونی  -->
<td align="center"><!-- آغاز دومین سلول جدول بیرونی  -->
<table width="250" border="2"><!-- آغاز دومین جدول درونی -->
<td align="center"><!-- آغاز سلول دومین جدول درونی -->
محتویات دومین جدول درونی
</td><!-- پایان سلول دومین جدول درونی -->
</table><!-- پایان دومین جدول درونی -->
</td><!-- پایان دومین سلول جدول بیرونی -->
</table><!-- پایان جدول بیرونی -->

این هم نتیجه به دست آمده:

محتویات اولین جدول درونی
محتویات دومین جدول درونی

قابل ذکر است که ما در این مثالها برای بهتر مشخص شدن محل جدولها از شناسه border استفاده کرده ایم. شما می توانید به دلخواه از آن استفاده کنید.

بهتر است در هنگام نوشتن کدها عرض جدولها را مشخص کنید تا در پایان به هم ریخته نباشند.

با این روش می توانید هر تعداد جدول که نیاز داشته باشید در کنار هم قرار دهید.


نظرات بازدید کنندگان
نویسنده : sara
سلام
خسته نباشید
می خواستم بپرسم بجای تگ brاز چه تگی دیگری میتونیم استفاده کنیم.
 
نویسنده : رضا
توضیحات خیلی عالیه واقعا قابل درک هستند متشکرم.
 
نویسنده : hamed
خيلي عالي بود موفق باشي
 
نویسنده : a
اگه مي شد كد بازي هم بزني خيلي خوب بود .
منتظر هستم.
 
نویسنده : nastaran
ممنون
 
نویسنده : َARA
salam vaghan Learning khobi dari boro to nakhe ajax mer30
 
نویسنده : black rose
واقعا لذت بردم. tanx