Border ها در جداول
برای مشخص کردن border های جدول در CSS، از صفت border استفاده میکنیم.
در مثال زیر یک border مشکی برای عناصر <table> ، <th> و <td> مشخص شده است :
} table, th, td
;border : 1px solid black
{
توجه داشته باشید که جدول مثال فوق دارای دو border است. و این به خاطر این است که عناصر table و <th> و <td> دارای border های جداگانه ای هستند.
صفت border-collapse
از صفت border-collapse برای تبدیل border های دوتایی جدولی که باید به یک border کاهش پیدا کند استفاده میشود :
} table
;border-collapse : collapse
{
} table, th, td
;border : 1px solid black
{
اگر شما بخواهید فقط یک border اطراف جدول رسم شود، صفت border را فقط برای تگ <table> تنظیم کنید :
} table
;border : 1px solid black
{
صفات طول و عرض برای یک جدول
طول و عرض یک جدول با استفاده از صفات width و height در زبان CSS مشخص میشوند.
در مثال زیر مقدار طول جدول برابر با 100% و عرض عناصر <th> با مقدار 50 پیکسل تنظیم شده اند.
} th
;text-align : left
{
تراز بندی افقی
از صفت text-align برای ترازبندی افقی (مانند چپ، راست و وسط) محتوا در <th> یا <td> استفاده میشود.
به صورت پیشفرض، محتوای عناصر <th> دارای ترازبندی وسط بوده و محتوای عناصر <td> دارای ترازبندی چپ هستند.
در جدول مثال زیر متون داخل عناصر <th> چپ چین شده اند:
} th
;text-align : left
{
ترازبندی عمودی
با استفاده از صفت vertical-align (با استفاده از مقادیر top ، bottom و middle) میتوان متون داخل عناصر <th> یا <td> را به صورت عمودی ترازبندی کرد.
به صورت پیشفرض، ترازبندی عمودی برای محتوای یک جدول ، وسط (middle) است (برای هر دو عنصر <th> و <td>).
در مثال زیر ترازبندی افقی برای عناصر <td> با مقدار bottom تنظیم شده است :
} td
;height : 50px
;vertical-align : bottom
{
تنظیم Padding برای جداول
برای کنترل فضای بین محتوای یک جدول و border های آن ، از صفت padding در عناصر <th> و <td> استفاده میکنیم :
} th, td
;padding : 15px
;text-align : left
{
جداکننده های افقی
برای افزودن جداکننده های افقی به جدول صفت border-bottom را برای عناصر <th> و <td> تنظیم میکنیم :
} th, td
;border-bottom : 1px solid #ddd
{
استفاده از امکان hover برای جدول
از انتخاب کننده ی hover: در تگ <tr> برای هایلایت کردن ردیف هایی که موس روی آنها قرار میگیرد استفاده میکنیم :
{ tr:hover { background-color : #f5f5f5
ایجاد جدول های راه راه برای خوانایی بیشتر داده ها
برای اینکه خوانایی داده ها در جداول بهتر شود میتوان از انتخاب کننده ی ()nth-child و صفت background-color برای ردیف های زوج و فرد یک جدول استفاده کرد.
{ tr:nth-child(even) { background-color : #f2f2f2
رنگ یک جدول
در مثال زیر رنگ پس زمینه برای جدول و رنگ متون عناصر <th> مقدار دهی شده اند :
} th
;background-color : #4CAF50
;color : white
{
جدول های واکنش گرا
اگر اندازه ی صفحه نمایش آنقدر کوچک شود که نتوان همه ی محتوای جدول را نشان داد، در این حالت یک جدول واکنش گرا به صورت افقی اسکرول خواهد خورد.
برای این کار جدول مورد نظر را داخل یک عنصر div قرار داده و مقدار صفت style آن را برابر overflow-x:auto قرار دهید :
<div style= "overflow-x:auto;"><table>... table content ...</table></div>
منبع:learnsource