CSSسفارشی سازی جدول ها در
برای سفارشی سازی ظاهر جداول می توانیم روی بخش های مختلفی از جدول کار کنیم.
- شکل، ضخامت و رنگ خطوط جدول
- طول و عرض سلول ها و طول و عرض جدول
- تنظیمات فونت متون داخل جدول
- محل قرار گیری متون در جدول
تنظیمات خطوط جدول
- برای تعیین نوع خطوط از جمله ساده (solid)، نقطه ای (dotted)، خطوط منقطع (dashed) و میزان ضخامت خطوط به صورت زیر عمل می کنیم:
مثال 1:
<style> table, th, td { border: 1px solid; } </style>
مثال 2:
<style> table { border: 5px dashed; } th { border: 1px solid; } td { border: 3px dotted; }
</style>
- برای تعیین عرض جدول براساس پیکسل و یا درصد از width به این صورت عمل می کنیم:
table { width: 100%; }
- برای تعیین اندازه سلول ها و یا کل جدول از width و height استفاده می شود.
مثال 1:
<style> table{ width: 100px; height: 270px; } </style>
مثال 2:
<style> table, td, th { border: 1px solid black; }
table { width: 100%; }
th { height: 70px; } </style>
تعیین موقعیت متون در جدول
تعیین موقعیت متون باید از دو جهت افقی و عمودی درون ستون صورت گیرد. برای تعیین موقعیت افقی از دستور text-align و برای تعیین موقعیت عمودی از vertical-align داخل تنظیمات مربوط به <td> استفاده می شود.
مثال:
<style> table, td, th { border: 1px solid black; } table { width: 100%; } td { height: 50px; vertical-align: bottom; text-align: center; } </style>
تعیین استایل جدول
جداول فرمت های ظاهری متفاوتی دارند از جمله تعیین رنگ پس زمینه، محل قرارگیری خطوط جدول، استفاده از حالت zebra برای سطرهای جدول و…
- به منظور استفاده از خطوط افقی جدا کننده سطرها مانند شکل زیر از دستور border-bottom برای ایجاد خطوط در پایین سطرها و از دستور border-topبرای ایجاد خطوط بالای سطرها استفاده می کنیم.
- همچنین می توانیم با استفاده از تنظیمات نشانگر مانند tr:hover این امکان را ایجاد کنیم که وقتی موس روی سطری قرار گرفت رنگ سطر تغییر کند.
- برای ایجاد حالت zebra در جداول نیز باید از دستور nth-child(even) استفاده کنیم، اگر بخواهیم سطرهای زوج تیره تر باشند even و اگر بخواهیم سطرهای فرد تیره تر باشند odd را به عنوان ورودی دستور استفاده می کنیم.
مثال:
<html> <head> <style> table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; }
tr:hover {background-color: coral;} tr:nth-child(even) {background-color: #f2f2f2;} </style> </head> <body>
<table> <tr> <th>Address</th> <th>Lastname</th> <th>address</th> </tr> <tr> <td>Teh</td> <td>Abbasi</td> <td>Ali</td> </tr> <tr> <td>Teh</td> <td>Moghadam</td> <td>Maryam</td> </tr> <tr> <td>Teh</td> <td>Ahmadi</td> <td>Reza</td> </tr> </table>
</body> </html>