جدولها وقتی دادههای واقعی و قابل تحلیل داریم بسیار مفید هستند، اما ظاهر پیشفرض آنها ساده و بیروح است. با کمی CSS میتوانیم جدولها را خواناتر و حرفهایتر کنیم.
🧱 مرحله اول: تیتر جدول (Header)
table th {
text-align: left;
background-color: #22a087;
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
🔹 تیترها با رنگ پسزمینه و سایهی متن متمایز میشوند.
📦 مرحله دوم: مرزبندی جدول
table th,
table td {
border: 1px solid #22a087;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
🔹 با border-collapse خطوط دوتایی حذف میشوند.
📏 مرحله سوم: عرض و پدینگ
table {
width: 100%;
}
table th,
table td {
padding: 10px;
}
🔹 جدول تمام عرض صفحه را میگیرد و محتوا از لبهها فاصله دارد.
🦓 مرحله چهارم: ردیفهای راهراه (Zebra Striping)
table tbody tr:nth-child(odd) td {
background-color: #e5f2ed;
}
🔹 خوانایی دادهها با رنگ متناوب افزایش مییابد.
🧮 مرحله پنجم: کنترل عرض ستونها
.col-item-name { width: 60%; }
.col-qty, .col-price { width: 20%; }
🔹 با کلاسها میتوانیم عرض ستونها را دقیقاً تنظیم کنیم.
🧭 مرحله ششم: تراز افقی دادهها
.grocery-list tr td:nth-child(2),
.grocery-list tr td:nth-child(3),
.grocery-list tr th:nth-child(2),
.grocery-list tr th:nth-child(3) {
text-align: center;
}
🔹 ستونهای عددی یا کمیتها وسطچین میشوند.
🧍 مرحله هفتم: تراز عمودی
table th,
table td {
vertical-align: top;
}
🔹 متن چندخطی در سلولها از بالا شروع میشود و ظاهر هماهنگتری ایجاد میکند.
✅ جمعبندی
در این درس یاد گرفتیم:
- تغییر رنگ و ظاهر تیترها
- مرزبندی و حذف خطوط اضافی
- کنترل عرض و پدینگ سلولها
- ایجاد ردیفهای راهراه برای خوانایی بهتر
- استفاده از
nth-childبرای انتخاب دقیق سلولها - تنظیم تراز افقی و عمودی دادهها