HTML Table Styling
🎨 روش‌های استایل‌دهی جدول‌ها در HTML
1. استفاده از ویژگی‌های داخلی (inline styles)
<table style=“border: 1px solid black; width: 100%;”>
<tr>
<th style=“background-color: lightgray;”>ستون ۱</th>
<th style=“background-color: lightgray;”>ستون ۲</th>
</tr>
<tr>
<td style=“text-align: center;”>مقدار ۱</td>
<td style=“text-align: center;”>مقدار ۲</td>
</tr>
</table>
2. استفاده از CSS داخلی (داخل تگ <style>)
<style>
table {
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e0f7fa;
}
</style>
<table>
<tr>
<th>نام</th>
<th>امتیاز</th>
</tr>
<tr>
<td>علی</td>
<td>۹۵</td>
</tr>
<tr>
<td>زهرا</td>
<td>۸۸</td>
</tr>
</table>
3. ویژگی‌های رایج در استایل‌دهی جدول‌ها
| ویژگی | توضیح |
|---|---|
border |
تعیین نوع و اندازه‌ی خط دور سلول‌ها |
padding |
فاصله‌ی متن داخل سلول از لبه‌ها |
text-align |
تراز متن (چپ، وسط، راست) |
background-color |
رنگ پس‌زمینه سلول یا ردیف |
border-collapse |
برای یکی کردن خطوط بین سلول‌ها (مفید برای طراحی حرفه‌ای) |
hover |
برای تغییر استایل هنگام حرکت ماوس روی ردیف |
4. استفاده از کلاس برای استایل تمیزتر
<style>
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
border: 1px solid gray;
padding: 8px;
}
.my-table th {
background-color: #ddd;
}
</style>
<table class=“my-table”>
<tr>
<th>محصول</th>
<th>قیمت</th>
</tr>
<tr>
<td>کتاب</td>
<td>۵۰ هزار تومان</td>
</tr>
</table>
دیدگاهتان را بنویسید