استایل دهی جدول ها در CSS

در این بخش از آموزش طراحی سایت به آموزش کار با جدول ها و آموزش استایل دهی جدول ها می پردازیم.

استایل دهی جدول ها در CSS

در طراحی سایت و طراحی صفحات وب، جداول یکی از مهمترین عناصر برای نمایش اطلاعات مرتب شده هستند. با استفاده از CSS می توانید جدول های HTML را به طرز شگفت انگیزی زیبا طراحی کنید.

آموزش CSS

خطوط جدول در CSS

از مشخصه border، برای تشکیل خطوط جدول در CSS استفاده کنید. مثال زیر خطوط صاف و سیاه را برای عنصرهای <table>، <th> و <td> مشخص می کند:

آموزش طراحی سایت

در این مثال با استفاده از عنصر table جدول ساده ای را ایجاد کرده ایم که نام و نام خانوادگی افراد را در قالب این جدول نمایش دهیم. حال با استفاده از ویژگی border که روی table, th و td تاثیر گذاشته است، مرز بین سلول های جدول و همچنین خود جدول را تعیین کرده ایم. در زیر می توانید نتیجه کد بالا را مشاهده کنید:

آموزش طراحی سایت

توجه کنید که جدول بالا خطوط دو خطی دارد. این اتفاق به این دلیل رخ می دهد که هر دو عنصر بخش <th> و <td> خطوط مختص به خود را در اختیار دارند.


یکی کردن خطوط جدول در CSS

از مشخصه border-collapse برای یکی کردن خطوط جداگانه بخش های جدول استفاده کنید تا جدول به شکل زیر در بیاید:

آموزش استایل دهی جدول ها در CSS

اما شما می توانید حتی فقط یک حاشیه برای خود جدول در نظر بگیرید: مثال زیر نحوه انجام این کار را نشان میدهد:

آموزش جدول ها در CSS

در مثال بالا برای اینکه تنها یک حاشیه دور جدول قرار گیرد، مشخصه border را فقط برای <table> قرار داده ایم.

آموزش طراحی سایت

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

با مشخصه های width و height می توانید ارتفاع و عرض جدول را مشخص کنید. مثال زیر عرض جدول را روی 100% و ارتفاع عنصرهای <th> را روی 50 پیکسل تنظیم کرده است.

آموزش کار با جدول ها در CSS

خروجی مثال بالا به شکل زیر است:

آموزش CSS

ترازبندی محتوای درون جدول در CSS

مشخصه text-align موقعیت قرارگیری محتوا براساس محور افقی (یعنی چپ، راست، وسط) را تعیین می کند.

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

مثال زیر متن قرار گرفته در عنصرهای <th> را چپ چین می کند:

آموزش جدول ها در CSS

خروجی تغییر بالا به شکل زیر است:

آموزش CSS

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

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

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

مثال زیر قرارگیری متن در عنصرهای <td> را در جهت محور عمودی به سمت پایین منتقل می کند:

آموزش استایل دهی جدول ها در CSS

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

Padding جدول در CSS

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

آموزش کار با جدول ها در CSS

برای انجام این کار باید از دستورات زیر استفاده کنید.

آموزش CSS

خطوط افقی جدول در CSS

از مشخصه border-bottom در <th> و <td> برای جدا کردن بخش های جدول بصورت افقی استفاده می شود.

آموزش طراحی سایت

برای انجام این کار باید به صورت زیر رفتار کنید:

آموزش CSS

ویژگی hover برای جداول در CSS

سلکتور hover را در تگ tr استفاده کنید تا هنگامی که نشانگر موس روی سطرها قرار می گیرد رنگش تغییر کند:

آموزش استایل دهی جدول ها در CSS

برای این کار از دستور زیر استفاده نمایید:

آموزش طراحی سایت

جدول های رنگی در CSS

برای درست کردن جدول های رنگی در CSS از سلکتور ()nth-child برای اضافه کردن یک background-color به سطح های زوج یا فرد استفاده کنید.

آموزش CSS

دستور زیر نحوه انجام این کار را نشان می دهد:

آموزش CSS

رنگ جدول در CSS

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

آموزش کار با جدول ها در CSS

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

آموزش استایل دهی جدول ها در CSS

جدول Responsive در CSS

یک جدول Responsive هنگامی که صفحه نمایش برای نمایش دادن تمام محتوا کوچک باشد، یک اسکرول افقی را تعبیه می کند، تا کاربر بتواند تمامی اطلاعات جدول را ببیند.

آموزش CSS

برای این کار یک عنصر در برگیرنده مانند div با استایل overflow-x:auto دور عنصر <table> اضافه کنید تا جدول را بصورت responsive در بیاورید.

آموزش طراحی سایت
آموزش طراحی سایت آموزش CSS آموزش HTML آموزش استایل دهی جدول ها در CSS آموزش جدول ها در CSS آموزش کار با جدول در CSS