%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (آخرین فرصت)
سبد (0)

تبلیغات

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

آموزش صوتی CSS

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

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

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

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