آموزش HTML5 و CSS3 تگ های مربوط به جدول (table)

مطالب پیشنهادی برای شما مهمان عزیز

بنام خدا,

نکته ­ی مهمی که باید ذکر شود این است که متاسفانه برخی از طراحان وب از جدول­ها برای ایجاد طرح بندی و ساختار و چارچوبصفحات وب استفاده می­کنند
که خوب این امر یک اشتباه بزرگ در طراحی است و یادتان باشد که به هیچ عنوان از جدول­ها برای چنین امری استفاده نکنید.

آموزش HTML5 و CSS3 تگ های مربوط به جدول (table)

در این جلسه  از آموزش های پاسخ وردپرس و ادامه سری آموزش های ساده ولی کاربردی زبان html , میرسیم به تگ table که برای ایجاد جداول در وب سایت می باشد.

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

در زمان های قدیم از این تگ برای دیزاین کامل یک وب سایت استفاده میشد که با آمدن تگ های div و span ( که در ادامه سری آموزشی به آنها اشاره خواهم کرد ) ,
منسوخ شد و در حال حاضر فقط برای ایجاد جداول در وب سایت مورد استفاده قرار میگیرد .

آموزش html تگهای table

توضیح مختصری در مورد کارکرد تگ

  • <table> :  برای ایجاد یک جدول در بین محتوای صفحه‌ی وب از این تگ استفاده می‌کنیم.
  • <caption>: از این تگ جهت معین کردن عنوان برای جدول استفاده می شود.
  • <th> : از این تگ جهت تعیین سلول سرتیتر برای جدول استفاده می شود.
  • <tr> : از این تگ جهت ایجاد سطر در جدول استفاده می شود.
  • <td> : از این تگ جهت ایجاد سلول در جدول استفاده می شود.
  • <thead> : از این تگ برای برای قرار دادن تگ‌های سرصفحه سلول ها استفاده می شود.
  • <tbody> : از این تگ برای بخش بندی محتوایی و همچنین ساختار معنایی محتوای جدول استفاده می شود.
  • <tfoot> : از این تگ برای ایجاد پاصفحه سلول ها استفاده می شود.
  • <col> : از این تگ جهت ایجاد ستون برای استفاده درون تگ colgroup استفاده می شود.
  • <colgroup> : از این تگ جهت تعریف گروهی متشکل از یک یا چند ستون برای اعمال تغییرات ظاهری بر روی آنها استفاده می شود.

نکته : تگ های caption و th از جمله تگ های اختیاری می باشد که اگر از آنها استفاده کنید , خاصیت سئویی بسیاری دارد و کمک به ارتقا رتبه ( صفحه سایت ) شما در موتور های جستجو خواهد کرد.

بیشتر بخوانید :
آموزش طراحی قالب html و css طراحی بخش محتوای سایت | پاسخ وردپرس |

توجه : ساخت یک جدول بدون داشتن سه تگ بالا tr , table و td هیچ معنایی ندارد و ساخته نمی شود .
ضمنا نوشته های داخل جداول فقط باید داخل td و th قرار گیرد.

مثال :

در مثال ذیل با نحوه ایجاد یک جدول ساده با استفاده از تگ­های فوق آشنا می‌شویم.

 

بیشتر بخوانید :
آموزش ساخت منوی آبشاری در html و css قسمت دوم | پاسخ وردپرس |

خروجی جدول فوق بشکل ذیل خواهد بود.

آموزش html

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

نکته مهم : برای دیزاین جدول , اعم از حاشیه , خط کشی , فاصله و … از css استفاده میکنیم . این تگ دارای Attribute هایی در این رابطه هست اما تمامی آنها در html5 منسوخ شده است.

من یک تعداد استایل برای زیبا سازی جدول تعریف کردم که نگران استایل های داده شده نباشید توی جلسات بعدی
تمام این کد های css را خدمت شما آموزش خواهم داد

بیشتر بخوانید :
آموزش طراحی قالب html طراحی footer نمایش آخرین نرم افزار های موبایل | پاسخ وردپرس |

خروجی کار مثال تصویر زیر خواهد شد بعد از اضافه کردن کد های css

آموزش ساخت جداول در html

خوب دوستان عزیز این آموزش هم به پایان رسید امید وارد که برای شما مفید بوده باشه منتظر نظرات با ارزش شما هستم موفق و پیروز باشید توی زندگی

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

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

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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

  1. با عرض سلام خدمت شما اگر امکان داره میخواستم یک جدول که در سربرگ در ردیف اول که دارای دو سلول به شماره ۱ و دو باشد در ادامه در ردیف دوم یک سلول در زیر سلول ردیف اول و در ادامه ردیف دوم سه سلول زیر مجموعه سلول دوم در ردیف یک باشد و عرض سلول ۲ ردیف ۱ با ۳ سلول ردیف ۲ یکی باشد و در ادامه هر کدام از سه سلول ردیف دوم به صورت افقی به دونیم تقسیم و نیمه پایین به صورت عمودی به دونیم تقسیم بشه امکانش هست با کد به همچین تقسیم بندی برسیم و اگر امکانش باشه واستون تصویر جدول رو ارسال کنم

    اسفند 19, 1397 - 1:03 قبل از ظهر