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

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

 

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

 

ساخت جدول در CSS

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

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

 

Table Borders(مرز جدول)

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

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

مثال:

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

 

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

Collapse Table Borders

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

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

مثال:

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

 

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

مثال:

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

 

Table Width and Height

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

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

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

مثال:

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

 

 

Horizontal Alignment

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

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

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

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

مثال:

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

 

Vertical Alignment

 چیدمان عمودی

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

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

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

مثال:

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

 

Table Padding

جدول پوشش

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

مثال:

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

 

Horizontal Dividers

تقسیم افقی

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

مثال:

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

 

Hoverable Table

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

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

مثال:

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

 

Striped Tables

جداول راه راه

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

مثال:

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

 

Table Color

رنگ جدول

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

مثال:

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

 

Responsive Table

جدول پاسخگو

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

مثال:

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

 

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

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

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



منبع مطلب

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

متن در CSS/بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

  آموزش متن در CSS CSS Text در این درس به بررسی خصوصیات متن در CSS …

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

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