جداول (Tables)
در «جداول CSS»، ظاهر جدول ها را قشنگ تر می کنیم. «مرز (Border)» یعنی خط دور سلول. «فاصله داخلی (Padding)» یعنی فاصله متن تا مرز. با این ها جدول مدرسه ات منظم تر دیده می شود.
مرز جدول ها با border
ویژگی «border» کوتاه نویسی سه بخش است: پهنا، نوع، و رنگ. این کد برای table، th و td مرز می گذارد.
table, th, td {
border: 1px solid;
}
رنگ مرز جدول
می توانی رنگ مرز را تعیین کنی. مثلا سبز روشن برای تاکید.
table, th, td {
border: 1px solid green;
}
نکته: اگر برای table و سلول ها مرز بگذاری، «مرز دوتایی» می بینی. راه حلش «collapse» است.
ادغام مرزها با border-collapse (جداول CSS)
«border-collapse: collapse» مرزهای جدا را یکی می کند. بنابراین دیگر دوتایی نیستند.
table {
border-collapse: collapse;
}
فاصله داخلی سلول ها با padding
برای نفس کشیدن متن، به th و td «padding» بده. متن خواناتر می شود.
th, td {
padding: 10px;
}
فاصله بین مرز سلول ها با border-spacing
«border-spacing» فاصله بین مرز سلول های مجاور است. فقط وقتی «separate» باشد کار می کند.
table {
border-collapse: separate;
border-spacing: 15px;
}
فقط مرز بیرونی جدول
اگر فقط دورِ جدول خط می خواهی، مرز را فقط روی «table» بگذار.
table {
border: 1px solid;
}
گام های عملی
- مرز پایه را تعیین کن.
- در صورت نیاز رنگ بده.
- اگر مرز دوتایی شد، collapse بگذار.
- برای خوانایی، padding بده.
- در صورت جداسازی، border-spacing تنظیم کن.
جمع بندی سریع
- border کوتاه نویسی سه ویژگی است.
- collapse مرز دوتایی را حل می کند.
- padding خوانایی سلول ها را بهتر می کند.
- border-spacing فقط در حالت separate است.
برای لیست های بدون جدول، بخش فهرست ها را ببین. همچنین برای استایل لینک ها در جدول، صفحه لینک ها مفید است. اگر «جداول CSS» بیشتر می خواهی، همین صفحه مرجع توست.