021-20483015

جدول در CSS

ظاهر جدول هاي HTML را مي توان با استفاده از CSS بسيار بهتر كرد.
 

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

 

 

خط حاشيه جدول

براي تعريف خط حاشيه براي جدول ها در CSS از صفت border استفاده مي كنيم.
در مثال زير براي عناصر <table> ،‌ <th> و <td> يك خط حاشيه سياه تعريف شده است :


مثال :

خط حاشیه جدول
table, th, td {
   border: 1px solid black;
}
مشاهده مثال
 

توجه داشته باشيد كه جدول مثال بالا ،‌خط حاشيه دوبل دارد. اين به خاطر تعريف خط حاشيه جداگانه براي جدول و ستون ها و رديف ها است.

 

 

 

 

 

تقليل دادن خطوط حاشيه

 

 

 

براي تقليل دادن خطوط حاشيه از 2 خط به يك خط از صفت border-collapse استفاده مي كنيم :

مثال : 

خط حاشیه تکی در جداول
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
مشاهده مثال
 


اگر فقط خطي به دور كل جدول مي خواهيد ،‌ فقط براي عنصر <table> ،‌خط حاشيه را تعيين كنيد.

 

مثال :

حاشیه تک خط فقط برای جدول
table {
    border: 1px solid black;
}
مشاهده مثال
 
 

عرض و ارتفاع جدول

براي تعيين عرض و ارتفاع جدول از صفات width و height استفاده مي كنيم.

در مثال زير عرض جدول بر روي 100% تنظيم شده است و ارتفاع <th> بر روي 50px :‌

مثال :

عرض و ارتفاع جدول
table {
    width: 100%;
}

th {
    height: 50px;
}
مشاهده مثال
 
 

تراز افقي

زماني كه بخواهيم ترازبندي محتواي سلول هاي جدولي را تنظيم كنيم از صفت text-align و مقادير left ،‌ right و center استفاده مي كنيم.
بطور پيش فرض محتواي <th> وسط چين و محتواي <td> چپ چين است. در مثال زير محتواي <th> چپ چين شده است.

مثال :

تراز افقی
th {
    text-align: left;
}
مشاهده مثال
 

 

تراز عمودي

براي تعيين تراز عمودي محتواي سلول ها ،‌ از صفت vertical-align و مقادير top , bottom و middle استفاده مي كنيم. بطور پيش فرض تراز عمودي محتواي سلول ها در عناصر <th> و <td> در ميانه قرار دارد.

در مثال زير ،‌ تراز عمودي محتواي عنصر <td> بر روي bottom  تنظيم شده است.

مثال :

تراز عمودی
td {
    height: 50px;
    vertical-align: bottom;
}
مشاهده مثال
 

 

فضاي حاشيه جدول

براي كنترل فاصله بين خط حاشيه و محتوا در جدول ،‌ از صفت padding بر روي عناصر <td> و <th> استفاده مي كنيم.

مثال :

فضای حاشیه
th, td {
    padding: 15px;
    text-align: left;
}
مشاهده مثال
 

 

خطوط جداكننده افقي

اگر ميخواهيد فقط با يك خط زير از رديف ،‌ آن را از رديف بعدي جدا كنيد ، صفت border-bottom را براي عناصر <th> و <td> تعريف كنيد.

مثال :

جداکننده های افقی
th, td {
    border-bottom: 1px solid #ddd;
}
مشاهده مثال
 

براي تمايز رنگي رديف ها به هنگام قرار دادن ماوس روي رديف مورد نظر ،‌ سلكتور hover: را براي <tr> تنظيم مي كنيم.

مثال :
جدول قابل اشاره
tr:hover {background-color: #f5f5f5}
مشاهده مثال
 

براي متمايز كردن رديف هاي جدول با دو رنگ يك در ميان (گورخري) ،‌ سلكتور ()nth-child را بر روي رديف هاي "فرد" يا "زوج" تنظيم كرده و به آن رنگ دلخواه را اضافه كنيد.

مثال :
جدول های نواری
tr:nth-child(even) {background-color: #f2f2f2}
مشاهده مثال
 
 

رنگ جدول

در مثال زير ،‌ رنگ پس زمينه و رنگ متن را براي عنصر <th> تعريف كرده ايم.

مثال :

رنگ جدول
th {
    background-color: #4CAF50;
    color: white;
}
مشاهده مثال
 
 

جدول رسپانسيو (واكنش گرا)

اگر صفحه نمايش بيش از حد كوچك شود ،‌ در جدول هاي واكنش گرا ،‌ يك نوار اسكرول افقي به جدول اضافه مي شود تا همه محتوا مشاهده گردد.

يك عنصر نگه دارنده مانند div با صفت و مقدار overflow-x:auto به عنصر <table> اضافه كنيد تا جدول رسپانسيو شود.

مثال :

جدول واکنش گرا
...محتوای جدول ...
مشاهده مثال
 
 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط