خانه / آموزش HTML / بخش شانزدهم-جداول HTML
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۲ آبان ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش شانزدهم-جداول HTML

 

قدم قبلی >< قدم بعدی

جداول HTML

تعریف یک جدول HTML

در این آموزش html  به جداول در  HTML می پردازیم.

جدول HTML با برچسب <table> تعریف شده است.

هر ردیف جدول با برچسب <tr> تعریف شده است. هدر جدول با برچسب <th> تعریف شده است. به طور پیش فرض، عناوین جدول درشت و متمرکز هستند. داده جدول / سلول با تگ <td> تعریف شده است.

نکته: عناصر <td> ظروف داده شده از جدول هستند. آنها می توانند تمام انواع عناصر HTML را داشته باشند متن، تصاویر، لیست ها، جداول دیگر، و غیره

جدول HTML – اضافه کردن یک حاشیه

اگر مرز برای جدول مشخص نکنید، بدون مرز نمایش داده خواهد شد.

مرز با استفاده از خصوصیت مرزی CSS تنظیم می شود:

به یاد داشته باشید حاشیه ها را برای هر دو جدول و سلول های جدول تعریف کنید.

جدول HTML – مرزهای درهم و برهم

اگر می خواهید مرزها به یک مرز سقوط کنند، ویژگی border-collapse را اضافه کنید:

جدول HTML – اضافه کردن لایه بندی سلول
محفظه سلول فضای بین محتوای سلول و مرزهای آن را مشخص می کند.

اگر شما polding را مشخص نکنید، سلولهای جدول بدون پدینگ نمایش داده خواهند شد.

برای تنظیم padding، از ویژگی  padding در css استفاده کنید:

جدول HTML – عنوان چپ چین

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

برای چسباندن عنوانهای جدول با چپ، از ویژگی  text-align در css استفاده کنید:

جدول HTML – اضافه کردن فاصله

فاصله بین فضای بین سلول ها را مشخص می کند.

برای تنظیم فاصله مرز برای یک جدول، از ویژگی border-spacing در css استفاده کنید:

نکته: در صورتی که جدول مرزهای فروپاشیده شده است، فاصله مرزی تاثیری ندارد.

سلول هایی که تعداد زیادی ستون را در آن قرار می دهند

برای ایجاد فاصله سلولی بیش از یک ستون، از ویژگی colspan استفاده کنید:

سلول هایی که تعداد زیادی سطر را در آن قرار می دهند

اضافه کردن عنوان

برای اضافه کردن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:

یک استایل ویژه برای یک جدول

برای تعریف یک سبک خاص برای یک جدول خاص، یک ویژگی id را به جدول اضافه کنید:

 

گام قبلی >< گام بعدی
بخش شانزدهم-جداول HTML
5 (100%) 2 votes

لینک کوتاه این مطلب: https://tiktheme.com/?p=11728


کانال تلگرام تیک تم

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

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