سبد (0)

آموزش‌های پیشنهادی فرادرس

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

جداول در CSS

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

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
North/SouthSimon CrowtherUK
Paris spécialitésMarie BertrandFrance
The Big CheeseLiz NixonUSA
VaffeljernetPalle IbsenDenmark

لبه های جدول(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 یک جدول را تنظیم کنیم.

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان