بدانید که چگونه یک مرز جدول CSS را فقط پنج دقیقه ایجاد کنید
ممکن است شنیده باشید که جداول CSS و HTML مخلوط نمی شوند. این به سادگی درست نیست بله، استفاده از جداول HTML برای طرح دیگر بهترین شیوه طراحی وب نیست، با استفاده از سبک های CSS جایگزین شده است، اما جداول هنوز هم نشانه گذاری درست برای استفاده از اضافه کردن داده های جدولی به یک صفحه وب است.
متأسفانه، چون بسیاری از متخصصان وب از جداول دور انداخته اند و فکر می کنند که آنها سم هستند، بسیاری از این متخصصان تجربه کمتری در کار با این عنصر HTML معمول و مبارزه دارند که باید آنها را در یک صفحه وب مدیریت کند. به عنوان مثال، اگر شما یک جدول در یک صفحه دارید و می خواهید خطوط داخلی را به سلول های جدول اضافه کنید.
جدول جدول محدوده CSS
هنگامی که از CSS برای اضافه کردن مرز به جداول استفاده می کنید، تنها مرز را در خارج از جدول اضافه می کند. اگر می خواهید خطوط داخلی را به سلول های جداگانه آن جدول اضافه کنید، باید مرزها را به عناصر CSS داخلی اضافه کنید. شما همچنین می توانید از برچسب HR برای اضافه کردن خطوط داخل سلول های فردی استفاده کنید.
برای استفاده از سبک های تحت پوشش در این مقاله، شما باید بدانید که یک جدول در صفحه وب شما وجود دارد. سپس شما باید یک صفحه سبک را به عنوان یک ورق سبک داخلی در سر سند خود ایجاد کنید (احتمالا تنها این کار را انجام دهید اگر «سایت شما» یک صفحه باشد) یا به سند به عنوان یک ورق سبک خارجی (این همان چیزی است که شما انجام خواهد شد اگر سایت شما چندین صفحه باشد - به شما این اجازه را می دهد که همه صفحات را از یک ورق خارجی بنویسید). شما سبک را برای اضافه کردن خطوط داخلی به آن ورق سبک قرار دهید.
قبل از اینکه تو شروع کنی
ابتدا باید تصمیم بگیرید که کجا می خواهید خطوط در جدول خود ظاهر شوند. شما چند گزینه دارید، از جمله:
- در اطراف تمام سلول ها برای تشکیل یک شبکه؛
- قرار دادن خطوط بین ستون ها؛
- فقط بین سطرها؛ یا
- بین ستون یا ردیف خاص
شما همچنین می توانید خطوط در اطراف سلول های فردی و یا در داخل سلول های فردی قرار دهید.
نحوه اضافه کردن خط در اطراف تمام سلول ها در یک جدول
برای اضافه کردن خطوط در اطراف تمام سلولهای جدول خود، ایجاد این اثر شبکهای مانند، به جدول سبک خود اضافه کنید:
td، th {
مرز: جامد 1px سیاه و سفید؛
}
چگونه می توان خطوط بین ستون ها را در یک جدول اضافه کرد
برای اضافه کردن خطوط بین ستون ها (این خطوط عمودی است که از ستون های جدول به بالا به پایین اجرا می شود)، به جدول سبک خود اضافه کنید:
td، th {
border-left: solid 1px black؛
}
سپس، اگر شما نمی خواهید آنها را در ستون اول نمایش داده شود، شما باید یک کلاس را به سلول های th و td اضافه کنید . در این مثال، ما فرض می کنیم که یک کلاس از مرزهای مرزی در آن سلول ها داریم و مرز را با این قانون خاص CSS مشخص می کنیم. بنابراین در اینجا کلاس HTML ما استفاده می کنیم:
class = "no-border">
و سپس می توانیم سبک زیر را به جدول سبک ما اضافه کنیم:
.no-border {
border-left: none؛
}
چگونه خطوط را فقط بین سطرها در یک جدول اضافه کنیم
همانطور که با اضافه کردن خطوط بین ستون، شما می توانید این کار را تنها با یک سبک ساده اضافه شده به جدول سبک خود را انجام دهید. زیر CSS خطوط عمودی بین هر ردیف جدول ما اضافه می کند:
tr {
border-bottom: 1px black solid؛
}
و برای حذف مرز از پایین جدول، شما یک بار دیگر یک کلاس را به آن برچسب tr اضافه کنید:
class = "no-border">
سبک زیر را به جدول سبک خود اضافه کنید:
.no-border {
border-bottom: none؛
}
نحوه اضافه کردن خطوط بین ستون های خاص یا ردیف ها در یک جدول
اگر فقط می خواهید خطوط بین ردیف ها یا ستون های خاص، شما باید از یک کلاس در آن سلول ها یا ردیف ها استفاده کنید. اضافه کردن یک خط بین ستون ها کمی سخت تر از بین سطرها است، زیرا شما باید کلاس را به هر سلول در آن ستون اضافه کنید. اگر جدول شما به طور خودکار از یک CMS از نوع خاصی تولید شود ، ممکن است ممکن نباشد، اما اگر صفحه دستکاری شده باشد، می توانید کلاس های مناسب را برای انجام این اثر اضافه کنید.
class = "side-border">
اضافه کردن خطوط بین رد ها بسیار ساده تر است، زیرا شما می توانید کلاس را به سطر که می خواهید خط را اضافه کنید اضافه کنید.
class = "border-bottom">
سپس CSS را به جدول سبک خود اضافه کنید:
طرف طرفدار {
border-left: solid 1px black؛
}
.border-bottom {
border-bottom: 1px black solid؛
}
نحوه اضافه کردن خطوط در اطراف سلول های فردی در یک جدول
برای اضافه کردن خطوط در اطراف سلول های فردی، یک کلاس را به سلول هایی می دهید که می خواهید مرز را در اطراف آن اضافه کنید:
class = "border">
و سپس CSS زیر را به جدول سبک خود اضافه کنید:
.order {
مرز: جامد 1px سیاه و سفید؛
}
چگونه می توان خطوط داخل سلول های فردی را در یک جدول اضافه کرد
اگر می خواهید خطوط را داخل محتویات یک سلول اضافه کنید، ساده ترین راه برای انجام این کار با برچسب قانون افقی (
) است.
نکات مفید
اگر در مرزهای شما شکاف ها را متوجه شوید، باید اطمینان حاصل کنید که سبک سقوط مرز در جدول شما تنظیم شده است. به جدول سبک خود اضافه کنید:
جدول {
فروپاشی مرز: سقوط؛
}
شما می توانید از تمام CSS بالا استفاده کنید و از ویژگی مرز در تگ جدول خود استفاده کنید. با این حال، واقعیت این است که ویژگی او، در حالی که از بین نمی رود، به طور قابل توجهی کمتر از CSS انعطاف پذیر است، زیرا شما تنها می توانید عرض عرض را تعریف کنید و فقط می توانید آن را در اطراف تمام سلول های جدول داشته باشید یا نه.