جدول در CSS
یادگیری 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> اضافه كنيد تا جدول رسپانسيو شود.
مثال :
...محتوای جدول ...
مشاهده مثال
نظر شما
>