ویژگی 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
آشنا شدیم.
توسعه دهندگان
احسان اسلامی