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

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

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

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

<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 استفاده کرده ایم. شما می توانید به دلخواه از آن استفاده کنید.

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

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