آشنایی با جداول در 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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

3 نظر

3 پاسخ

  1. تشکر از شما ????نویسنده عالی هستی ممنون از خودتون و تیم همکاریتون و میز فا تشکر????

    1. سلام امین عزیز.
      منم تشکر میکنم از علی عزیز که زحمت نوشتن این مقالات رو انجام دادن.
      ممنونم از حضورت.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=