جدولها یکی از المانهای پرکاربرد در صفحات وب هستند و معمولا با کمک خطوط مرزی در CSS، محدوده خانههای جدول، ردیفها و ستونها به شکلی مناسب مشخص میشوند. برای این منظور از ویژگی خلاصه border یا ویژگیهای border-width, border-style و border-color استفاده میشود. در این قسمت از مجموعه آموزشی CSS، با شیوه متداول ایجاد خط مرزی پیرامون جدول ها آشنا میشوید.
به عنوان یک مثال، کد زیر پیرامون تمام خانههای معمولی (المانهای <td>) و خانههای هدر یا سرتیتر (المانهای <th>) جدول، یک خط مرزی با رنگ مشکی به ضخامت 1 پیکسل و به صورت یکنواخت رسم میکند:
td, th {
border: 1px solid black;
}تصویر زیر نمایی از یک جدول نمونه پس از اعمال قانون CSS فوق را نمایش میدهد. شما میتوانید مشابه با سایر خطوط مرزی از رنگ، استایل و ضخامت دلخواه خود استفاده کنید.
بیشتر بخوانید: نحوه ایجاد جدول در HTML
در حالت متداولتر، علاوه بر سلولهای جدول، پیرامون کل جدول نیز خط مرزی رسم میشود:
table, td, th {
border: 1px solid black;
}
همانطور که در تصاویر فوق مشاهده میکنید رسم خط پیرامون جدول و خانههای آن باعث ایجاد خط مضاعف یا دوتایی میشود. دلیل این موضوع آنست که خط مرزی علاوه بر المان <table>، به تمام المانهای <td> و <th> نیز به صورت مجزا اعمال میشود که در لبههای مجاور یکدیگر، خط مرزی مضاعف ایجاد میکند. اگر مایلید این خطوط به یک خط خلاصه شوند از مفهومی به نام بهم آمیختگی یا فروپاشی خطوط مرزی با کمک ویژگی border-collapse استفاده میشود. به این ترتیب که با تخصیص مقدار collapse به این ویژگی برای یک جدول، خطوط مرزی کنار هم به یک خط تبدیل میشوند.
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}نتیجه کد فوق را در تصویر زیر مشاهده میکنید:
