فرمت دهی جداول در CSS

ظاهر یک جدول در HTML با استفاده از CSS میتواند تا حد زیادی بهبود یابد.در این فصل به نحوه ی فرمت دهی قسمت های مختلف یک جدول میپردازیم.


همانطور که در پایین مشاهده میکنید جدول مشخص شده دارای ظاهری مناسب بوده که از طریق اعمال صفات CSS روی آن حاصل شده است.

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Border ها در جداول 

برای مشخص کردن border های جدول در CSS، از صفت border استفاده میکنیم.

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

css-table

table, th, td {
   border: 1px solid black;
}
خودتان امتحان کنید

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


صفت  border-collapse

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

csstable2

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 پیکسل تنظیم شده اند.

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

 

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>
خودتان امتحان کنید

 

منتشر شده در ۱۸ شهریور ۱۳۹۶ حمید رضا ملکی ۱۳۶۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید