صفحه اصلی / آموزش CSS / بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables
آموزش ساخت جدول در CSS

 

ساخت جدول در CSS

برای شروع و قبل از آموزش ساخت جدول در CSS  بد نیست نگاهی بیاندازیم به یک جدول HTML ، در ادامه خواهیم دید که ظاهر این جداول تا حد زیادی با CSS بهبود می یابد:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Table Borders(مرز جدول)

برای تعیین مرزهای جدول در CSS، از ویژگی border(مرز) استفاده کنید.

مثال زیر یک مرز سیاه به عرض یک پیکسل را برای عناصر <table>، <th> و <td> مشخص می کند:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

توجه داشته باشید که در مثال بالا جدول دارای مرزهای دوگانه است. این به این علت است که هر دو جدول و عناصر <th> و <td> دارای مرزهای مجزا هستند.

Collapse Table Borders

حذف مرزهای جدول

خصوصیت حذف مرز تعیین می کند که آیا مرزهای جدول باید به یک مرز واحد تبدیل شوند یا نه:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

اگر فقط می خواهید یک مرز در اطراف جدول، فقط ویژگی مرزی را برای <table> مشخص کنید:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Table Width and Height

عرض و ارتفاع جدول

عرض و ارتفاع یک جدول با ویژگی های عرض و ارتفاع تعریف می شود.

مثال زیر پهنای جدول را به ۱۰۰٪ تعریف می کند و ارتفاع عناصر <th> تا ۵۰ پیکسل:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

 

Horizontal Alignment

 ترازبندی افقی

خصوصیت text-align تراز افقی (مانند چپ، راست، یا مرکز) محتوا را در <th> یا <td> تنظیم می کند.

به طور پیش فرض، محتویات عناصر <th> به ترتیب محور و محتویات <td> علامت گذاری می شوند.

مثال زیر چپ متن را در <th> عناصر:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Vertical Alignment

 چیدمان عمودی

اموال عمودی align یک تراز عمودی (مثل بالا، پایین، یا وسط) محتوا در <th> یا <td> را تنظیم می کند.

به طور پیش فرض، تراز عمودی محتوا در یک جدول متوسط ​​است (برای هر دو <th> و <td> عناصر).

مثال زیر متن تراز عمودی متن را به پایین برای عناصر <td> تنظیم می کند:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Table Padding

جدول پوشش

برای کنترل فضای بین مرز و محتوا در یک جدول، از ویژگی property padding در <td> و <th> elements استفاده کنید:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Horizontal Dividers

تقسیم افقی

ملک مرزی پایین را به <th> و <td> برای تقسیمات افقی اضافه کنید:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Hoverable Table

جدول قابل انعطاف

با استفاده از: hover selecter در <tr> برای برجسته کردن سطرهای جدول بر روی ماوس:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Striped Tables

جداول راه راه

برای جداول جوراب بافتنی، از انتخاب nth child () استفاده کنید و یک رنگ پسزمینه را به همه سطرهای جدول حتی (یا عجیب) اضافه کنید:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

Table Color

رنگ جدول

مثال زیر رنگ پسزمینه و رنگ متن <th> عناصر را مشخص می کند:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

 

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

Responsive Table

جدول پاسخگو

جدول پاسخگو یک نوار اسکرول افقی را نمایش می دهد اگر صفحه نمایش بسیار کوچک است برای نمایش محتوای کامل:

مثال:

با اجرای کد بالا تصویر زیر را خواهید دید:

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

 

اضافه کردن عنصر دربرگیرنده (مانند <div>) با از overflow-x: خودرو در سراسر <جدول> عنصر به آن پاسخگو:
توجه داشته باشید: در OS X Lion (در مک)، اسکرول های بطور پیش فرض پنهان هستند و تنها هنگام استفاده می شود (حتی اگر “overflow: scroll” تنظیم شده باشد) نشان داده می شود.

بخش هفدهم- آموزش ساخت جدول در CSS یا آموزش CSS Tables

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

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

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