ظاهر جداول در صفحات وب سایت را میتوان از طریق css مدیریت کرد.
در این حالت شما کنترل کاملی در خصوص تمامی جوانب جدول در اختیار دارید. و با کمی تمرین میتوانید جدول را به بهترین شکل طراحی کنید.
در آموزش امروز همراه ما باشید تا طراحی و تنظیمات و کار با جداول در css را با هم مرور کنیم.
Table Borders
برای یادآوری کار با جدول در html و تگ های مربوط به آن به این لینک مراجعه کنید.
برای مشخص کردن خطوط و حاشیه های جدول، css ویژگی table border را در اختیار شما قرار میدهد.
برای مثال برای ایجاد جدول زیر کافیست کد زیر را در بخش کدهای css وارد کنید.در این مثال ما برای مقادیر اصلی جدول که <th>، <td> ، و <table> هستد، یک خط ساده با رنگ سیاه را تعریف کرده ایم.
کد این جدول :
[php]
table, th, td {
border: 1px solid black;
}
[/php]
میتوانید از این لینک این کد را تمرین کنید.
همانطور که مشاهده میکنید این جدول دارای حاشیه های دوخط است. این به این دلیل است که هم خاصیت <th> و هم <td> دارای حاشیه ای جدا برای خود هستند. برای آموزش تگ های <th> و <td> میتوانید به این لینک مراجعه کنید.[/cdb_icon_box]
border-collapse
برای اینکه تنها یک حاشیه در اطراف خانه های جدول ایجاد شوند میتواندی از ویژگی border-collapse استفاده کنید. این خصوصیت تعیین می کند که حاشیه های جدول در قالب یک جدول باشند که یا به صورت مجزا دارای حاشیه باشند:
[php]
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
[/php]
نتیجه حاصل از کد بالا را از طریق این لینک ببینید.
اگر میخواهید تنها یک حاشیه خارجی در اطراف جدول(و نه در اطراف خانه های جدول) داشته باشید، کافیست ویژگی border را برای table تعریف کنید:
[php]
table {
border: 1px solid black;
}
[/php]
طول و عرض جدول
طول جدول با مقدارheight، و عرض آن باwidth ، مقداردهی می شوند.
مثال زیر نحوه کدنویسی و مقداردهی طول و عرض جدول را مشخص می کند. در این کد، مقدار 100%برای پهنای جدول در نظر گرفته شده است. و برای هر یک از خانه های جدول نیز مقدار 50px تعریف شده است:
[php]
table {
width: 100%;
}
th {
height: 50px;
}
[/php]
نتیجه را مشاهده کنید.
تراز بندی افقی متن
ویژگی text-alignدر ترازبند متن به شما کمک میکند. شما میتوانید مقادیر چپ، راست، و وسط را برای این ویژگی تعریف کنید.
متن های موجود در عنصر < th> وسط چین و متون موجود در عنصر < td> چپ چین هستند.
در مثال زیر تراز متن در عنصر < th> را چپ چین تعریف کرده ایم:
[php]
th {
text-align: left;
}
[/php]
نتیجه را مشاهده کنید.
ترازبندی عمودی متن
ویژگی vertical-align متن را به صورت عمودی در جدول تراز بندی می کند. شما میتوانید مقادیر بالا، پایین و وسط را برای این ویژگی تعریف کنید. در تراز بندی عمودی، متون به طور پیشفرض در هردو عنصر
< th> و< td> در وسط قرار میگیرد.
در مثال زیر، مثدار پایین را برای این ویژگی تعریف کرده ایم:
[php]
td {
height: 50px;
vertical-align: bottom;
}
[/php]
نتیجه را ببینید.
ویژگی padding
در آموزش های قبل با padding آشنا شده اید. میتوانید برای یادآوری بیشتر به این لینک مراجعه کنید. برای مقداردهی paddng در جداول از کد زیر استفاده کنید.
[php]
th, td {
padding: 15px;
text-align: left;
}
[/php]
نتیجه را مشاهده کنید.
ویژگی Table Color
همانطور که از نام آن پیداست، این ویژگی به شما در تعیین رنگ جداول و المان های آن کمک میکند. شما میتوانید رنگ پس زمینه، حاشیه ها، و متن موجود در جدول و یا هریک از خانه های ان را تعیین کنید.
کد تعیین رنگ th
[php]
th {
background-color: #4CAF50;
color: white;
}
[/php]
نتیجه را از اینجا ببینید و تمرین کنید.
جداول انعطاف پذیر
جداولی که با خاصیتResponsive مقداردهی می شوند میتوانند همزمان با تغییر اندازه صفحه نمایش، خود را همسان سازی کنند. همچنن این جداول برای نماش در صفحات انواع ابزارهای الکترونیکی مناسب هستند. مانند موبایل، تبلت، کامپیوتر و…
برای اینکه جدولی را responsive کنید نیاز دارید که یک بخش <div> تعریف کنید.
کدزیر نمونه ای از این وضعیت است:
[php]
[/php]
نتیجه را از اینجا ببینید.
تمرینات بیشتر در سایت w3schools: