جداول
محتویات
- ۱ کادرهای جدول
- ۲ تقسیم کادرهای (به انگلیسی: border)های جدول
- ۳ عرض و ارتفاع جدول
- ۴ تراز بندی افقی
- ۵ تراز بندی عمودی
- ۶ Padding در جدول
- ۷ تقسیمکنندههای افقی
- ۸ جدول قابل Hover شدن
- ۹ جداول راه راه (striped)
- ۱۰ رنگ جدول
- ۱۱ جدول واکنش گرا
- ۱۲ مثالهای بیشتر
- ۱۳ خود را با تمرینها آزمایش کنید!
- ۱۴ ویژگی های جدول در CSS
- ۱۵ منابع آموزشی
نمای یک جدول HTML را میتوان به کمک CSS تا حد زیادی بهبود داد:[۱]
کادرهای جدول
برای مشخص کردن کادرهای جدول در CSS، از ویژگی border
استفاده کنید.
مثال زیر یک کادر سیاه رنگ برای عناصر <th> ،<table> و <td> مشخص کردهاست:
توجه داشته باشید که جدول مثال بالا کادری از نوع دو خطی (به انگلیسی: double) دارد. این به این خاطر است که هم جدول و هم عناصر <th> و <td> کادرهای مجزا دارند.
تقسیم کادرهای (به انگلیسی: border)های جدول
ویژگی border-collapse
مشخص میکند که آیا کادرهای جدول میبایست به یک کادر از نوع تک خطی (به انگلیسی: single) تقسیم شوند:
اگر فقط یک کادر دور جدول میخواهید، تنها کافی است ویژگی border
را برای عنصر <table> تعیین کنید:
عرض و ارتفاع جدول
عرض وارتفاع یک جدول به وسیله ویژگیهای width
و height
تنظیم میشود.
مثال زیر عرض جدول را روی ۱۰۰٪ تنظیم میکند، و ارتفاع عناصر <th> را روی ۵۰ پیکسل تنظیم میکند:
تراز بندی افقی
ویژگی text-align
مقدار تراز بندی افقی (مانند چپ، راست، یا وسط) محتوای موجود در <th> یا <td> را تنظیم میکند.
به صورت پیش فرض، محتوای عناصر <th> به صورت وسط چین تراز شده اند و محتوای عناصر <td> نیز به صورت چپ چین تراز شدهاند.
مثال زیر متن را در عناصر <th> به صورت چپچین تراز می کند:
تراز بندی عمودی
ویژگی vertical-align
مقدار تراز بندی عمودی (مانند بالا، پایین، یا وسط) محتوای موجود در <th> یا <td> را تنظیم میکند.
به صورت پیش فرض، تراز بندی عمودی محتوا در یک جدول وسط چین است (برای هر دوی عناصر <th> و <td>)
مثال زیر مقدار تراز عمودی متن را برای عناصر <td> برابر با پایین تنظیم میکند:
Padding در جدول
بمنظور کنترل فضای بین کادر (border) و محتوا در یک جدول، از ویژگی padding
برای عناصر <td> و <th> استفاده کنید:
تقسیمکنندههای افقی
برای خطوط تقسیمکننده افقی ویژگی border-bottom
را به <th> و <td> اضافه کنید:
جدول قابل Hover شدن
از انتخابگر :hover
روی <tr> استفاده کنید تا سطرهای جدول زمانی که نشانهگر موس روی آنها قرار میگیرد برجسته (Highlight) شوند :
جداول راه راه (striped)
برای جداول راه راه (Zebra-striped)، از انتخابگر nth-child()
استفاده کنید و background-color
را برای تمامی سطرهای زوج (یا فرد) جدول اضافه کنید:
رنگ جدول
مثال زیر رنگ پس زمینه و رنگ متن را برای عناصر <tr> مشخص میکند:
جدول واکنش گرا
در صورتی که صفحه نمایش برای نمایش تمام محتوا بسیار کوچک باشد، جدول واکنش گرا یک نوار پیمایش افقی نمایش خواهد داد:
یک عنصر نگه دارنده (مانند <div>) با ویژگی overflow-x:auto
در اطراف عنصر <table> اضافه کنید تا آن را واکنش گرا کنید.
نکته: در سیستم عامل Lion (در Mac)، نوارهای پیمایش به صورت پیشفرض مخفی هستند و تنها زمانی نمایش داده میشوند که مورد استفاده قرار گیرند (حتی اگر "overflow:scroll" تنظیم شود).
مثالهای بیشتر
این مثال نحوه ساخت یک جدول تجملی را نشان میدهد.
این مثال نحوه تنظیم موقعیت عنوان جدول را نمایش میدهد.
خود را با تمرینها آزمایش کنید!
ویژگی های جدول در CSS
ویژگی | توضیحات |
---|---|
border | تمامی ویژگیهای کادر (به انگلیسی: border) را در یک اعلان تنظیم میکند |
border-collapse | مشخص میکند که آیا کادرهای جدول میبایست تقسیم شوند یا نه |
border-spacing | فاصله بین کادرهای سلولهای مجاور در جدول را مشخص میکند |
caption-side | محل قرارگیری عنوان جدول را مشخص میکند. |
empty-cells | مشخص میکند که آیا کادر و پس زمینه در سلولهای خالی باید نمایش داده شود یا خیر |
table-layout | الگورتیم چیدمان مورد استفاده برای یک جدول را تنظیم میکند |
منابع آموزشی