آموزش طراحی سایتآموزش HTML

آشنایی با جداول در HTML

منظور از جدول در 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>
نمونه جدول ساخته شده با HTML
نمونه جدول ساخته شده با HTML

نکته: تگ <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

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر