منظور از جدول در HTML چیست؟ چطور از تگ Table در HTML استفاده کنیم؟ جداول چه کاربردی دارند؟ تعریف جداول، انواع تگهای مربوط به جداول و چند مثال عملی از تگ table را در این مقاله مورد بررسی قرار میدهیم. در ادامه آموزش جامع HTML میزفا همراه ما باشید.
سرفصلهای پست
آشنایی با جداول در HTML
استفاده از جداول در زبان HTML روشی مناسب برای نمایش اطلاعات در یک ساختار منظم است که امکان خوانایی آسان را برای مخاطبین فراهم میکند.
زمانی که امکان استفاده از جداول در HTML فراهم شد، زبان CSS به صورت گسترده مورد استفاده نبود. از این رو در آن زمان وبسایتها بیشتر برپایه جداول ایجاد میشدند. جداول برای مختصاتدهی به محتوا و همچنین چیدمان عناصر داخل صفحه مورد استفاده قرار میگرفت. البته جداول منحصرا برای نمایش اطلاعات ایجاد شده بودند که استفاده از آن در چیدمان صفحه باعث بروز مشکلاتی در آن میشد.
خوشبختانه زمان زیادی گذشته است و امروزه جداول صرفا برای ساماندهی اطلاعات مورد استفاده قرار میگیرند و در عین حال از CSS برای منظم ساختن عناصر داخل صفحه و چیدمان عناصر به صورت گسترده استفاده میشود.
ساخت جداول در HTML همچنان یک چالش است. طریقه ساخت جدول به صورت عمده به اطلاعات و نحوه نمایش آن بستگی دارد. پس از ساخت جدول باید با استفاده از کدهای CSS برای آن استایل مناسبی در نظر گرفته شود تا خوانایی آن برای کاربران روشن باشد.
ساخت جدول
جداول از مجموعهای از اطلاعات که در ردیفها و ستونهای مشخص قرار میگیرند، ساخته میشود. زبان HTML تگهای متفاوتی را برای تعریف و ساختاردهی این ردیفها و ستونها در اختیار ما قرار میدهد.
برای ایجاد یک جدول باید از تگ <table> استفاده کنیم. هر ردیف از جدول با تگ <tr> تعیین میشود. برای تعریف هدر جدول باید از تگ <th> استفاده شود، به صورت پیشفرض هدر جداول بولد و در مرکز هستند.
برای تعریف یک سلول داده جهت نمایش اطلاعات باید از تگ <td> استفاده شود.
مثال:
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Ali</td> <td>Esmaeili</td> <td>20</td> </tr> <tr> <td>Pouria</td> <td>AriaFar</td> <td>1228</td> </tr> </table>

نکته: تگ <td> نگهدارندههای داده در جدول هستند. بنابراین آنها میتوانند انواع عناصر HTML مانند متن،عکس،لیست و یا جداول تو در تو را شامل شوند.
اضافه کردن حاشیه
در HTML اگر برای جداول هیچ حاشیهای تعیین نکنید، بدون حاشیه نمایش داده می شوند. برای تنظیم حاشیه از خاصیت border در CSS استفاده میکنیم.
table, th, td { border: 1px solid black; }
حاشیه تک خطی
برای تعیین حاشیه جداول و سلولهای آن با یک خط باید از خاصیت border-collapse موجود در CSS استفاده کنید.
table, th, td { border: 1px solid black; border-collapse: collapse; }
فاصله سلول ها
فاصله سلولها در واقع فاصله درونی هر سلول با مرز سلول است. اگر برای سلولها هیچ فاصلهای تعیین نکنید، بدون فاصله نمایش داده میشوند.
برای تعیین فاصله سلولی باید از خاصیت padding موجود در CSS استفاده کنید.
th, td { padding: 15px; }
نمایش اطلاعات چپ به راست
به صورت پیشفرض، جداول از حالت بولد و در مرکز استفاده میکند. برای تغییر موقعیت متنهای داخل سلولها باید از خاصیت text-align موجود در CSS استفاده کنید.
th {text-align: left;}
فاصله بین حاشیه
فاصله بین حاشیه در واقع فاصلههای بین سلول ها را تعیین میکند. برای تغییر فاصله بین سلولها باید از خاصیت border-spacing موجود در CSS استفاده کنید.
به یاد داشته باشید اگر خاصیت حاشیه تکخطی برای جدول تعیین شده باشد، این خاصیت هیچ تغییری ایجاد نمیکند.
table { border-spacing: 5px; }
کپشن جدول
برای تعریف عنوان یا کپشن جدول باید از تگ <caption> در داخل جدول استفاده کنیم.
<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>Farvardin</td> <td>100 Tooman</td> </tr> <tr> <td>Mehr</td> <td>50 Tooman</td> </tr> </table>

ترکیب چند سلول
در بعضی شرایط، دو یا چند سلول باید به هم ترکیب شوند بدون این که تغییری در ترکیب کل ستون ها و ردیف های جدول ایجاد شود. ممکن است دو سلول در کنار هم داده یکسان داشته باشند یا یک سلول هیچ دادهای نداشته باشد و یا برای تغییر استایل باید سلول ها ترکیب شوند. در این شرایط ما از خواص colspan و rowspan استفاده میکنیم. این خواص بر روی تگهای <td> و <th> کار میکنند.
خاصیت colspan برای تحت پوشش قرار دادن یک سلول در بین چند ستون است و خاصیت rowspan برای زیر پوشش قرار دادن یک سلول در بین چند ردیف.
هر خاصیت یک مقدار عدد صحیح را برای تعداد سلولهایی که تحت پوشش قرار میدهد قبول میکند. عدد 1 به صورت پیش فرض در این دو خاصیت تعریف شده است.
36873
تگ های جدول
با استفاده از جداول در HTML تگهای مورد نیاز برای ساخت یک جدول را به همراه توضیحات در زیر آوردهایم. هرکدام از این تگها از خاصیتهای عمومی HTML پشتیبانی میکنند.
تگ | توضیحات |
<table> | تعریف یک جدول |
<th> | تعریف هدر در یک جدول |
<tr> | تعریف یک ردیف در جدول |
<td> | تعریف یک سلول در جدول |
<caption> | تعریف کپشن جدول |
<colgroup> | تعریف رنگ ستون های جدول |
<col> | تعریف رنگ هر ستون در داخل تگ <colgroup> |
<thread> | جمع بندی محتوای هدر جدول |
<tbody> | جمع بندی محتوای بدنه جدول |
<tfoot> | جمع بندی محتوای فوتر جدول |
نتیجه گیری
در این مقاله به صورت جامع با جداول در HTML آشنا شدیم. چندین مثال عملی در مورد جداول زدیم و همچنین کمی در مورد استایلدهی به آنها صحبت کردیم. البته با ویژگیهای CSS که در این مقاله با آنه ا آشنا شدید در آموزشهای CSS به صورت خیلی کامل آشنا خواهید شد.
در این مقاله سعی کردم که به صورت خیلی ساده ولی جامع جداول را در HTML به شما آموزش دهم، اگر سوال، انتقاد یا پیشنهادی در رابطه با جداول و این مقاله داشتید خیلی خوشحال میشم که اون رو برام بنویسید.
تا یک جلسه دیگه از آموزشهای زبان نمادگذاری HTML …
3 پاسخ
تشکر از شما ????نویسنده عالی هستی ممنون از خودتون و تیم همکاریتون و میز فا تشکر????
سلام امین عزیز.
منم تشکر میکنم از علی عزیز که زحمت نوشتن این مقالات رو انجام دادن.
ممنونم از حضورت.
❤️ باعث افتخاره