آموزش کادر(border) در جدول ها در CSS

ظاهر یک جدول HTML می تواند با استفاده از CSS بهبود پیدا کند:

<table id="customers">
  <tr>
    <th>شرکت</th>
    <th>شهر</th>
    <th>کشور</th>
  </tr>
  <tr>
    <td>دیجی کالا</td>
    <td>تهران</td>
    <td>ایران</td>
  </tr>
</table>

استفاده از کادرهای جدول(Table Borders)

برای مشخص کردن کادرهای جدول در CSS، می توانیم از ویژگی border استفاده کنیم. مثال زیر یک کادر بسته(solid) را برای عناصر <table> و <th> و <td> مشخص می کند:

table, th, td {
  border: 1px solid;
}

جدول با عرض کامل(Full-Width Table)

جدول بالا، ممکن است در برخی موارد کوچک به نظر برسد. اگر به یک جدول نیاز دارید که باید در سراسر صفحه ی نمایش گسترده شود(یعنی عرض صفحه را کاملا اشغال کند) دستور width: 100% را برای عنصر <table> تنظیم کنید:

table {
  width: 100%;
}

کادرهای دوتایی(Double Borders) در جدول ها

توجه کنید که جدول ها در مثال های بالا، از کادرهای دوتایی(double borders) استفاده می کنند. علتش این است که هم table و هم <th> و <td> کادرهای مجزایی دارند. برای حذف کادرهایی دوتایی، به مثال زیر نگاهی بیاندازید.

جمع شدن کادرهای جدول(Collapse Table Borders)

ویژگی border-collapse مشخص می کند که کادرهای جدول باید جمع شوند و به یک کادر تکی تبدیل شوند یا خیر:

table {
  border-collapse: collapse;
}

اگر تنها می خواهید یک کادر به دور جدول کشیده شود، تنها از ویژگی border برای <table> استفاده کنید:

table {
  border: 1px solid;
}