آموزش سی اس اس CSS

ظاهر جدول در HTML میتواند با کمک CSS بسیار بهتر شود.

Table Borders

برای استایل دادن به بوردرها در CSS از پراپرتی border استفاده میشود.

در مثال زیر بوردر سیاه برای المان های table، th، و td انتخاب شده است.

 
table, th, td {
    border: 1px solid black;
}
 

توجه داشته باشید که در مثال بالا دو بوردر داریم. این اتفاق بخاطر این است که المان های table، th، و td بوردرهای جداگانه دارند.

Collapse Table Borders

پراپرتی border-collapse برای تعیین این موضوع است که بوردرهای جدول یکی شوند یا نه:

 
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
 

اگر میخواهید تنها بوردر دور جدول قرار بگیرد، پراپرتی border را فقط برای به المان table تعیین کنید.

 
table {
    border: 1px solid black;
}
 

Table Width and Height

عرض و ارتفاع جدول از طریق پراپرتی های width و height تعیین میشوند.

در مثال زیر عرض جدول 100% است و ارتفاع المان th 50px میباشد.

 
table {
    width: 100%;
}
th {
    height: 50px;
}
 

Horizontal Alignment

از پراپرتی text-align برای چیدمان افقی متن (چپ چین، راست چین و وسط چین) محتوای المان های th یا td استفاده میشود.

بصورت پیش فرض، محتوای المان th وسط چین، و محتوای المان td چپ چین است.

در مثال زیر، المان های th چپ چین شده اند.

 
th {
    text-align: left;
}
 

Vertical Alignment

از پراپرتی vertical-align برای چیدمان عمودی متن (بالا، پایین و وسط) محتوای المان های th یا td استفاده میشود.

بصورت پیش فرض، محتوای المان th، و محتوای المان td وسط قرار میگیرد.

در مثال زیر، المان های td پایین قرار گرفته اند.

 
td {
    height: 50px;
    vertical-align: bottom;
}
 

Table Padding

برای کنترل کردن فاصله بین بوردر و محتوای جدول، از پراپرتی padding برای المان های th و td استفاده کنید.

 
th, td {
    padding: 15px;
    text-align: left;
}
 

Horizontal Dividers

برای جدا کردن ستون های جدول پراپرتی border-bottom را به المان های th و td اضافه کنید.

 
th, td {
    border-bottom: 1px solid #ddd;
}
 

Hoverable Table

برای هایلایت کردن ردیف های جدول در زمانی که نشانگر موس روی آن میرود از سلکتور :hover استفاده میشود.

 
tr:hover {background-color: #f5f5f5;}
 

Striped Tables

برای نمایش ردیف های جدول به شکل راه راه از سلکتور nth-child() با پراپرتی background-color برای ردیف های زوج یا فرد استفاده کنید.

 
tr:nth-child(even) {background-color: #f2f2f2;}
 

Table Color

در مثال زیر رنگ پس زمینه و متن المان th تغییر کرده است

 
th {
    background-color: #446cb2;
    color: white;
}
 

Responsive Table

در جدول ریسپانسیو و در نمایشگرهای کوچک اسکرول افقی زیر جدول قرار میگیرند.

برای داشتن یک جدول ریسپانسیو بالای المان table کانتینر مانند div انتخاب کنید و به آن استایل overflow-x:auto بدهید.

 
<div style="overflow-x: auto;">
 
<table>
... table content ...
</table>
 
</div>
 

نکاتی که باید در ذهن داشته باشید

در OS X Lion در Mac، بصورت پیش فرض اسکرول نمایش داده نمیشود. تنها در زمانی که از آن استفاده میشود معلوم خواهد شد. (حتی اگر از overflow:scroll استفاده شود.)

نوشتن دیدگاه

نام (اجباری)

آدرس پست الکترونیکی (اجباری است اما نمایش داده نمی‌شود)

آدرس سایت

مرا برای دیدگاه‌های بعدی به یاد بسپار

ارسال

لغو