جدول در HTML

جدول در HTML

جداول همان سطر و ستون هایی هستند که در کنار یکدیگر قرار میگیرند. جدول در HTML نیز به همین ترتیب است و برای ایجاد جداول در HTML هر بخش دارای تگ های جداگانه هستند که زیر مجموعه تگ اصلی جدول یعنی <table>  قرار میگیرند. در ادامه به معرفی تمامی این تگ ها خواهیم پرداخت و نحوه استفاده از انها را توضیح میدهیم.

تگ table :  معرفی کننده جدول در HTML است.

تگ tr : معرفی کننده سطر جدیدی است.

تگ td : داده های درون هر بخش جدول را معرفی میکند

تگ th : معرفی کننده هدر یا همان عنوان جدول است.

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

جدول بالا دارای دو سطر و ۳ ستون است. همان طور که مشاهده کرده اید با استفاده از tr این دو سطر را مشخص کرده ایم و بااستفاده از td تعداد ستون ها و داده های درون هر یک از این ستون ها نوشته شده است و در انتها تگ table بسته شده است.در این جا width عرض بخش های را مشخص میکند. خروجی این مثال به صورت زیر است.

Jill Smith ۵۰
Eve Jackson ۹۴
John Doe ۸۰

حاشیه در جدول HTML

حال اگر بخواهید برای این جدول مرزبندی تعیین کنید و از صفت Border استفاده کنید. ( البته به دلیل حذف شده این نوع استایل دادن در HTML های جدید بهتر است برای دادن border از Css استفاده کنید.

در مثال بالا به تگ table صفت border را اختصاص دادیم و مقدار ان را ۱ پیکسل در نظر گرفته ایم.خروجی مثال به صورت زیر است:

Jill Smith ۵۰
Eve Jackson ۹۴
John Doe ۸۰

عنوان در جدول HTML

همان طور که میدانید جداول بدون عنوان هیچ معنا و مفهومی ندارد برای نوشتن هر عنوان یک سطر به سطر های جدول اضافه کرده و تگ th را تعریف میکنیم. به مثال زیر دقت کنید:

در مثال با سطر عنوان را نیز اضافه کردیم. توجه کنید که ترتیب همیشه در کد نویسی مهم است. در این مثال در بخش style دستور border-collapse مشاهده میکنید. این دستور خطوط حاشیه را از حالت دوتایی به یک حاشیه تبدیل میکند. خروجی این مثال را مشاهده کنید

Firstname Lastname Points
Jill Smith ۵۰
Eve Jackson ۹۴
John Doe ۸۰

 به بخش style میتوانید هر صفتی که میخواهید بدهید، فاصله حاشیه را با padding تغییر دهید، داده های نوشته شده را چپ چین، راست چین یا وسط چین کنید.

 

 

 

2 نظرات شما

  • الناز

    فروردین ۱۷, ۱۳۹۳ at ۱۲:۰۷ ب.ظ
    خیلی آموزش جامع و کاربردیه ممنون
  • یاسر داودفر

    فروردین ۱۸, ۱۳۹۳ at ۳:۲۳ ب.ظ
    سلام دوست عزیز . واقعا وب فوق العاده ای داری .. لذت بردم .. موفق باشی

پاسخ دهید

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


© 2013 Mobtadi. All rights reserved.
کلیه حقوق مادی و معنوی برای وبسایت مبتدی محفوظ است.