مرزهای جداول HTML

مرزهای جداول HTML

جداول HTML می‌توانند مرزهایی با سبک‌ها و شکل‌های مختلف داشته باشند.

نحوه اضافه کردن مرز (Border)

برای اضافه کردن یک مرز، از ویژگی border در CSS برای عناصر table، th و td استفاده کنید:

مثال

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

مرزهای جدولی فشرده (Collapsed Table Borders)

برای جلوگیری از داشتن مرزهای دوتایی (مانند مثال بالا)، ویژگی CSS border-collapse را روی collapse تنظیم کنید. این کار باعث می‌شود مرزها در یک مرز واحد ادغام شوند:

مثال

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

استایل‌دهی به مرزهای جدول (Style Table Borders)

اگر رنگ پس‌زمینه هر سلول را تنظیم کنید و به مرزها رنگ سفید (همانند پس‌زمینه سند) بدهید، حس یک مرز نامرئی را ایجاد می‌کنید:

مثال

<style>
    table, th, td {
        border: 1px solid white;
        border-collapse: collapse;
    }

    th, td {
        background-color: #96D4D4;
    }
</style>

مرزهای جدول گرد (Round Table Borders)

با ویژگی border-radius، گوشه‌های مرزها گرد می‌شوند:

مثال

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

با حذف table از انتخاب‌گر CSS، مرز اطراف کل جدول را نادیده بگیرید:

مثال

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

مرزهای جدول نقطه‌چین (Dotted Table Borders)

با ویژگی border-style، می‌توانید ظاهر مرز را تنظیم کنید.

مقادیر زیر مجاز هستند:

• dotted (نقطه‌چین)

• dashed (خط‌چین)

• solid (خط کامل)

• double (دوتایی)

• groove (شیاردار)

• ridge (برجسته)

• inset (فرورفته)

• outset (بیرون‌زده)

• none (بدون مرز)

• hidden (مخفی)

مثال

 th, td {
  border-style: dotted;
}

رنگ مرز (Border Color)

با ویژگی border-color، می‌توانید رنگ مرز را تنظیم کنید.

مثال

 th, td {
  border-color: #96D4D4;
}