نحوه ساخت جدول HTML

برای مرتب و منظم نگاه داشتن وب‌سایت شما یکی از روش‌ها، استفاده از جدول HTML است.

این قطعاً پیچیده‌ترین قسمت این آموزش است، با این وجود یادگیری آن مطمئناً در طولانی‌مدت نتیجه خواهد داد.

با این حساب، جدول هنوز هم می‌تواند راهی مفید برای ارائه مطالب در صفحه شما باشد.

یک جدول از چه چیزی تشکیل شده است؟

هنگام ترسیم جدول باید عنصری را با برچسب باز <table> باز کنیم. در داخل این برچسب، جدول را با استفاده از سطرهای جدول، <tr> و سلول‌ها، <td> ساختار می‌دهیم.

یک مثال از جدول HTML به شرح زیر است:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

این یک جدول 2 ردیفی با 3 سلول در هر ردیف تولید می‌کند.

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

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

جدول‌ها، حاشیه‌ها، فاصله‌ها معمولاً با استفاده از CSS سبک می‌شوند که در آموزش‌های بعدی به آن خواهیم پرداخت.

ساخت جدول

در ویرایشگر متن خود به یک صفحه جدید در صفحه index.html بروید. کد HTML زیر را وارد کنید:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>

فایل را ذخیره کرده و پیش‌نمایش آن را در مرورگر مشاهده کنید.

تبریک می‌گوییم! شما یک جدول ایجاد کردید.

استفاده از جدول HTML

• سلول‌های جدول که به عنوان هدرهای ستون یا هدرهای سطر عمل می کنند باید از عنصر <th> یا table header استفاده کنند.
• سلول های جدول را می‌توان با استفاده از ویژگی‌های colspan و rowspan ادغام کرد.
• جداول را می‌توان با استفاده از عناصر زیر به بخشهایی تقسیم کرد:
  • <thead>
  • <tbody>
  • <tfoot>
• با استفاده از عنصر <caption> می‌توان عنوانی را به جدول اضافه کرد.
• برای تعریف ستون‌های جدول برای یک ظاهر طراحی شده می‌توانید از <col> و <colgroup> استفاده کنید. با این حال، تعدادی از محدودیت‌ها با این عمل وجود دارد.

منبع: HTML.com