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

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

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

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

 

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

 

ساخت جدول در CSS

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

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

ساخت جدول در CSS 

 

Table Borders(مرز جدول)

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

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

مثال:

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

 تعیین مرزهای جدول در CSS

 

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

Collapse Table Borders(حذف مرزهای جدول)

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

مثال:

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

خصوصیت حذف مرز

 

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

مثال:

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

 یک مرز در اطراف جدول

 

Table Width and Height(عرض و ارتفاع جدول)

عرض و ارتفاع یک جدول با خصوصیات width and height (عرض و ارتفاع) تعریف می شود.

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

مثال:

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

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

 

 

Horizontal Alignment(ترازبندی افقی)

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

به طور پیش فرض، محتویات عناصر <th> در مرکز تراز می شود و محتویات <td> چپ-تراز می شوند.

مثال زیر متن موجود در <th> را چپ-تراز می کند:

مثال:

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

تراز افقی

 

Vertical Alignment(تراز عمودی)

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

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

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

مثال:

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

تراز عمودی

 

Table Padding(جدول پوشش)

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

مثال:

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

کنترل فضای بین مرز و محتوا

 

Horizontal Dividers(تقسیم افقی)

برای تقسیمات افقی خصوصیت border-bottom (مرز پایین) را به <th> و <td>  اضافه کنید:

مثال:

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

تقسیمات افقی

 

Hoverable Table(جدول قابل انعطاف)

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

مثال:

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

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

 

Striped Tables(جداول راه راه)

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

مثال:

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

جداول با زمینه راه راه یا دو رنگ

 

Table Color(رنگ جدول)

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

مثال:

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

 

رنگ پس زمینه و رنگ متن

Responsive Table(جدول پاسخگو)

اگر صفحه نمایش بسیار کوچک باشد برای نمایش محتوا به صورت کامل، جدول واکنش گرا یا responsive یک نوار اسکرول افقی را نمایش می دهد. اضافه کردن یک عنصر container(دربرگیرنده) مانند <div> با استفاده از overflow-x:auto در اطراف عنصر <جدول> آن را responsive یا واکنش گرا می کند:

مثال:

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

نوار اسکرول افقی

 

 

توجه : در سیستم‌عامل OS X (در مک)، اسکرول ها بطور پیش فرض پنهان هستند (حتی اگر “overflow: scroll” تنظیم شده باشد) و تنها هنگام استفاده نشان داده می شوند.

 

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

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


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

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

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