فرمت دهی جداول در 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)
از خصوصیت 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 تنظیم شده است:
توجه داشته باشید که جدول مثال بالا دو لبه خواهد داشت. این به خاطر این است که هم برای table و هم برای th/td به صورت جداگانه border تنظیم شده است.
اگر می خواهید فقط یک لبه داشته باشید از خاصیت border-collapse استفاده کنید.
یکی کردن Borderها
برای تبدیل لبه های دوخطی به لبه های یک خطی و مجزا از خاصیت border-collapse استفاده می گردد:
مثال (فرمت دهی جداول در CSS)
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
عرض و ارتفاع یک جدول (Width/height )
عرض و ارتفاع یک جدول با خصوصیات Width و height تعریف می شود.
در مثال زیر عرض جدول 100% و ارتفاع آن با 50px تنظیم شده است:
تراز بندی متن جدول(Alignment)
با خصوصیات text-align و vertical-align می توان متن داخل یک سلول جدول را تراز بندی کرد.
خصوصیت text-align متن را در جهت محور X تنظیم می کند (مثل چپ ، راست یا وسط)
خصوصیت vertical-align متن را در جهت محور Y تنظیم می کند(مثل بالا، پایین یا وسط)
Padding یک جدول
برای کنترل فاصله بین لبه ها و متن در جدول می توان از خصوصیت padding استفاده کرد:
رنگ جدول
در مثال زیر، در گروه اول یعنی (table, td, th) رنگ لبه ها با رنگ سبز تنظیم شده است و در گزینشگر (th) برای header جدول، رنگ پس زمینه با رنگ سبز و متن داخل آن با رنگ سفید تنظیم شده است:
مثال (فرمت دهی جداول در CSS)
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
مثال - خودتان امتحان کنید
ساخت یک جدول فانتزی
این مثال نشان می دهد که چگونه یک جدول فانتزی ایجاد کنیم.
تنظیم مکان عنوان یا Caption یک جدول
این مثال نشان می دهد که چگونه مکان caption یک جدول را تنظیم کنیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 38214