فرمت دهی جداول در 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>
خودتان امتحان کنید

 

دیدگاه ها

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

دیدگاه های ارزشمند شما

trever filips - ۲ سال قبل
سلام معنای اسکرول خوردن یعنی چی ؟
حمید رضا ملکی - ۲ سال قبل

اسکرول یا نوار پیمایش چیزی است که وقتی محتوایی در یک container نگنجد پدیدار میشود... در نتیجه شما با پیمایش کردن میتونید بقیه محتوا را ببینید..

trever filips - ۲ سال قبل
اگر بخواهم جدول را در وسط صفحه قرار بدم باید چیکار کنم؟
حمید رضا ملکی - ۲ سال قبل

سلام.. اون را داخل یک div قرار داده و سپس از مشخصه هایی مثل margin: 0 auto برای وسط چین کردن استفاده کنید...

Ali Bashi علی باشی - ۲ سال قبل
جدول با عکس هم میتونید مثالی بزنید؟؟ممنون
حمید رضا ملکی - ۲ سال قبل

سلام. کافی است داخل سلول مورد نظرتون از تک img به همراه آدرس معتبر تصویر استفاده کنید..

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.