استایل جدول (Table Styling)
می خواهی جدولت خواناتر شود؟ با «استایل جدول (Table Styling)» می توانی فاصله داخلی، خط های جداکننده، هاور، راه راه کردن سطرها و رنگ ها را تنظیم کنی. مثل خط کش کشیدن روی دفتر تا همه چیز مرتب بماند.
فاصله داخلی سلول ها با padding
«فاصله داخلی (Padding)» یعنی فضای بین متن و مرز سلول. این فضا متن را نفس دار می کند.
<style>
th, td {
padding: 10px;
text-align: left;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>پیتر</td>
<td>گریفین</td>
<td>$100</td>
</tr>
</table>
خط های افقی با border-bottom
برای جداکردن سطرها، یک «مرز پایینی (border-bottom)» روی th و td بگذار.
<style>
th, td {
border-bottom: 1px solid #ddd;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>لوئیس</td>
<td>گریفین</td>
<td>$150</td>
</tr>
</table>
هایلایت سطرها با :hover
«هاور (Hover)» یعنی وقتی ماوس روی سطر می رود، آن را برجسته کن.
<style>
tr:hover {
background-color: coral;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>جو</td>
<td>سوانسون</td>
<td>$300</td>
</tr>
</table>
سطرهای راه راه با nth-child()
برای خوانایی بهتر، سطرهای زوج را کمی رنگی کن. این کار را «راه راه (Zebra)» می گویند.
<style>
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>پیتر</td>
<td>گریفین</td>
<td>$100</td>
</tr>
</table>
رنگ دهی به سربرگ ها
با «background-color» و «color» می توانی سربرگ ها را پررنگ تر کنی.
<style>
th {
background-color: #04AA6D;
color: white;
}
</style>
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>پس انداز</th>
</tr>
<tr>
<td>لوئیس</td>
<td>گریفین</td>
<td>$150</td>
</tr>
</table>
گام های عملی
- با padding متن را نفس دار کن.
- با border-bottom سطرها را جدا کن.
- با :hover ردیف ها را قابل تعامل کن.
- با nth-child جدول را راه راه کن.
- با رنگ، سربرگ ها را برجسته کن.
نکته: اگر چیدمان به هم می ریزد، تراز جدول را بررسی کن. همچنین برای اندازه، به اندازه جدول سر بزن. برای مرزها سراغ مرزهای جدول برو.
جمع بندی سریع
- padding خوانایی سلول ها را بهتر می کند.
- border-bottom سطرها را تفکیک می کند.
- :hover ردیف ها را قابل توجه می کند.
- nth-child سطرهای راه راه می سازد.
- رنگ درست، هدر را واضح می کند.