ویژگی table-border در CSS

 از ویژگی border، برای ایجاد حاشیه جدول استفاده می کنیم.

نکته: برای آشنایی بیشتر با border، به آموزش ویژگی حاشیه در CSS مراجعه کنید.

در نمونه کد زیر، ویژگی حاشیه، روی تگ table - th - td اعمال شده است.

# نام نام خانوادگی سن
1 احسان اسلامی 31
2 امیر پاشایی 27

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

جدول تمام صفحه در CSS

اگر بخواهیم جدول تمام صفحه داشته باشیم، باید عرض تگ table را 100% کنیم.

# نام نام خانوادگی سن
1 احسان اسلامی 31
2 امیر پاشایی 27

table {
    width: 100%;
}

ویژگی border-collapse در CSS

ویژگی border-collapse، می تواند حاشیه ی دوتایی جدول را  به یک حاشیه تبدیل کند. (جدول زیر را با جدول بالا مقایسه کنید.)

# نام نام خانوادگی سن
1 احسان اسلامی 31
2 امیر پاشایی 27

table {
    border-collapse: collapse;
}

خلاصه درس

در این درس با ویژگی حاشیه جدول (Table Border) در CSS:

  • جدول تمام صفحه
  • ویژگی border-collapse

آشنا شدیم.

توسعه دهندگان
احسان اسلامی