در طراحی سایت و طراحی صفحات وب، جداول یکی از مهمترین عناصر برای نمایش اطلاعات مرتب شده هستند. با استفاده از CSS می توانید جدول های HTML را به طرز شگفت انگیزی زیبا طراحی کنید.
خطوط جدول در CSS
از مشخصه border، برای تشکیل خطوط جدول در CSS استفاده کنید. مثال زیر خطوط صاف و سیاه را برای عنصرهای <table>، <th> و <td> مشخص می کند:
در این مثال با استفاده از عنصر table جدول ساده ای را ایجاد کرده ایم که نام و نام خانوادگی افراد را در قالب این جدول نمایش دهیم. حال با استفاده از ویژگی border که روی table, th و td تاثیر گذاشته است، مرز بین سلول های جدول و همچنین خود جدول را تعیین کرده ایم. در زیر می توانید نتیجه کد بالا را مشاهده کنید:
توجه کنید که جدول بالا خطوط دو خطی دارد. این اتفاق به این دلیل رخ می دهد که هر دو عنصر بخش <th> و <td> خطوط مختص به خود را در اختیار دارند.
یکی کردن خطوط جدول در CSS
از مشخصه border-collapse برای یکی کردن خطوط جداگانه بخش های جدول استفاده کنید تا جدول به شکل زیر در بیاید:
اما شما می توانید حتی فقط یک حاشیه برای خود جدول در نظر بگیرید: مثال زیر نحوه انجام این کار را نشان میدهد:
در مثال بالا برای اینکه تنها یک حاشیه دور جدول قرار گیرد، مشخصه border را فقط برای <table> قرار داده ایم.
ارتفاع و عرض جدول در CSS
با مشخصه های width و height می توانید ارتفاع و عرض جدول را مشخص کنید. مثال زیر عرض جدول را روی 100% و ارتفاع عنصرهای <th> را روی 50 پیکسل تنظیم کرده است.
خروجی مثال بالا به شکل زیر است:
ترازبندی محتوای درون جدول در CSS
مشخصه text-align موقعیت قرارگیری محتوا براساس محور افقی (یعنی چپ، راست، وسط) را تعیین می کند.
بصورت پیش فرض، محتوای عنصر <th> در وسط قرار داشته و محتوای عنصر <td> چپ چین می باشد.
مثال زیر متن قرار گرفته در عنصرهای <th> را چپ چین می کند:
خروجی تغییر بالا به شکل زیر است:
تنظیمات عمودی جدول در CSS
مشخصه vertical-align موقعیت قرارگیری محتوا براساس محور عمودی (بالا، پایین و وسط) را در<th> یا <td> تعیین می کند.
بصورت پیش فرض، موقعیت قرارگیری محتوا در جدول براساس محور عمودی، وسط می باشد (هم برای عنصر <th> و هم <td>).
مثال زیر قرارگیری متن در عنصرهای <td> را در جهت محور عمودی به سمت پایین منتقل می کند:
خروجی مثال بالا به شکل زیر است:
Padding جدول در CSS
برای مدیریت کردن فضا بین خطوط و محتوا در جدول از مشخصه padding روی عنصرهای <td> و <th> استفاده کنید:
برای انجام این کار باید از دستورات زیر استفاده کنید.
خطوط افقی جدول در CSS
از مشخصه border-bottom در <th> و <td> برای جدا کردن بخش های جدول بصورت افقی استفاده می شود.
برای انجام این کار باید به صورت زیر رفتار کنید:
ویژگی hover برای جداول در CSS
سلکتور hover را در تگ tr استفاده کنید تا هنگامی که نشانگر موس روی سطرها قرار می گیرد رنگش تغییر کند:
برای این کار از دستور زیر استفاده نمایید:
جدول های رنگی در CSS
برای درست کردن جدول های رنگی در CSS از سلکتور ()nth-child برای اضافه کردن یک background-color به سطح های زوج یا فرد استفاده کنید.
دستور زیر نحوه انجام این کار را نشان می دهد:
رنگ جدول در CSS
مثال زیر رنگ پس زمینه و رنگ متن را برای عنصرهای <th> مشخص می کند:
خروجی دستور بالا به شکل زیر است:
جدول Responsive در CSS
یک جدول Responsive هنگامی که صفحه نمایش برای نمایش دادن تمام محتوا کوچک باشد، یک اسکرول افقی را تعبیه می کند، تا کاربر بتواند تمامی اطلاعات جدول را ببیند.
برای این کار یک عنصر در برگیرنده مانند div با استایل overflow-x:auto دور عنصر <table> اضافه کنید تا جدول را بصورت responsive در بیاورید.
