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

چاپ

جداول در CSS

در CSS به خوبی می توان ظاهر جداول HTML را اصلاح نمود:

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
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

لبه های جدول(Border)

Wiki

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

همان طور که می دانید برای ساخت جدول در HTML از تگ <table> استفاده می گردد. به عنوان مثال جدول بالا به صورت زیر خواهد بود:

<table>
 <tr>
  <th>...</th>
  <th>...</th>
  <th>...</th>
 </tr>
 <tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
 </tr>
 ...
 ...
</table>

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

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

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

توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.

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

یکی کردن Borderها

Wiki

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

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

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

عرض و ارتفاع یک جدول (Width/height )

Wiki

عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.

در مثال زیر عرض جدول 100% و ارتفاع آن با 50px تنظیم شده است:

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

table
{
width:100%;
}
th
{
height:50px;
}
خودتان امتحان کنید »

 تراز بندی متن جدول(Alignment)

Wiki

با خصوصیات text-align و vertical-align می توان متن داخل یک سلول جدول را تراز بندی کرد.

خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)

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

td
{
text-align:right;
}
خودتان امتحان کنید »

خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند(مثل بالا، پایین یا وسط)

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

td
{
height:50px;
vertical-align:bottom;
}
خودتان امتحان کنید »

Padding یک جدول

Wiki

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

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

td
{
padding:15px;
}
خودتان امتحان کنید »

رنگ جدول

Wiki

در مثال زیر، در گروه اول یعنی (table, td, th) رنگ لبه ها با رنگ سبز تنظیم شده است و در گزینشگر (th) برای header جدول، رنگ پس زمینه با رنگ سبز و متن داخل آن با رنگ سفید تنظیم شده است:

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

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

ساخت یک جدول فانتزی
این مثال نشان می دهد که چگونه یک جدول فانتزی ایجاد کنیم.

تنظیم مکان عنوان یا Caption یک جدول
این مثال نشان می دهد که چگونه مکان caption یک جدول را تنظیم کنیم.