جداول

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


نمای یک جدول HTML را می‌توان به کمک CSS تا حد زیادی بهبود داد:[۱]


کادرهای جدول

برای مشخص کردن کادرهای جدول در CSS، از ویژگی border استفاده کنید.

مثال زیر یک کادر سیاه رنگ برای عناصر <th> ،<table> و <td> مشخص کرده‌است:

مثال
1 table, th, td {
2   border: 1px solid black;
3 }


توجه داشته باشید که جدول مثال بالا کادری از نوع دو خطی (به انگلیسی: double) دارد. این به این خاطر است که هم جدول و هم عناصر <th> و <td> کادرهای مجزا دارند.

تقسیم کادرهای (به انگلیسی: border)‌های جدول

ویژگی border-collapse مشخص می‌کند که آیا کادرهای جدول می‌بایست به یک کادر از نوع تک خطی (به انگلیسی: single) تقسیم شوند:

مثال
1 table {
2   border-collapse: collapse;
3 }
4 
5 table, th, td {
6   border: 1px solid black;
7 }


اگر فقط یک کادر دور جدول می‌خواهید، تنها کافی است ویژگی border را برای عنصر <table> تعیین کنید:

مثال
1 table {
2   border: 1px solid black;
3 }


عرض و ارتفاع جدول

عرض وارتفاع یک جدول به وسیله ویژگی‌های width و height تنظیم می‌شود.

مثال زیر عرض جدول را روی ۱۰۰٪ تنظیم می‌کند، و ارتفاع عناصر <th> را روی ۵۰ پیکسل تنظیم می‌کند:

مثال
1 table {
2   width: 100%;
3 }
4 
5 th {
6   height: 50px;
7 }


تراز بندی افقی

ویژگی text-align مقدار تراز بندی افقی (مانند چپ، راست، یا وسط) محتوای موجود در <th> یا <td> را تنظیم می‌کند.

به صورت پیش فرض، محتوای عناصر <th> به صورت وسط چین تراز شده اند و محتوای عناصر <td> نیز به صورت چپ چین تراز شده‌اند.

مثال زیر متن را در عناصر <th> به صورت چپ‌چین تراز می کند:

مثال
1 th {
2   text-align: left;
3 }


تراز بندی عمودی

ویژگی vertical-align مقدار تراز بندی عمودی (مانند بالا، پایین، یا وسط) محتوای موجود در <th> یا <td> را تنظیم می‌کند.

به صورت پیش فرض، تراز بندی عمودی محتوا در یک جدول وسط چین است (برای هر دوی عناصر <th> و <td>)

مثال زیر مقدار تراز عمودی متن را برای عناصر <td> برابر با پایین تنظیم می‌کند:

مثال
1 td {
2   height: 50px;
3   vertical-align: bottom;
4 }


Padding در جدول

بمنظور کنترل فضای بین کادر (border) و محتوا در یک جدول، از ویژگی padding برای عناصر <td> و <th> استفاده کنید:

مثال
1 th, td {
2   padding: 15px;
3   text-align: left;
4 }


تقسیم‌کننده‌های افقی

برای خطوط تقسیم‌کننده افقی ویژگی border-bottom را به <th> و <td> اضافه کنید:

مثال
1 th, td {
2   border-bottom: 1px solid #ddd;
3 }


جدول قابل Hover شدن

از انتخابگر :hover روی <tr> استفاده کنید تا سطرهای جدول زمانی که نشانه‌گر موس روی آنها قرار می‌گیرد برجسته (Highlight) شوند :

مثال
tr:hover {background-color: #f5f5f5;}


جداول راه راه (striped)

برای جداول راه راه (Zebra-striped)، از انتخابگر nth-child() استفاده کنید و background-color را برای تمامی سطرهای زوج (یا فرد) جدول اضافه کنید:

مثال
tr:nth-child(even) {background-color: #f2f2f2;}


رنگ جدول

مثال زیر رنگ پس زمینه و رنگ متن را برای عناصر <tr> مشخص می‌کند:

مثال
1 th {
2   background-color: #4CAF50;
3   color: white;
4 }


جدول واکنش گرا

در صورتی که صفحه نمایش برای نمایش تمام محتوا بسیار کوچک باشد، جدول واکنش گرا یک نوار پیمایش افقی نمایش خواهد داد:

یک عنصر نگه دارنده (مانند <div>) با ویژگی overflow-x:auto در اطراف عنصر <table> اضافه کنید تا آن را واکنش گرا کنید.

مثال
1 <div style="overflow-x:auto;">
2 
3 <table>
4 ... table content ...
5 </table>
6 
7 </div>


نکته: در سیستم عامل Lion (در Mac)، نوارهای پیمایش به صورت پیش‌فرض مخفی هستند و تنها زمانی نمایش داده می‌شوند که مورد استفاده قرار گیرند (حتی اگر "overflow:scroll" تنظیم شود).

مثالهای بیشتر

ساخت یک جدول تجملی

این مثال نحوه ساخت یک جدول تجملی را نشان می‌دهد.

تنظیم موقعیت عنوان جدول

این مثال نحوه تنظیم موقعیت عنوان جدول را نمایش می‌دهد.

خود را با تمرینها آزمایش کنید!

ویژگی های جدول در CSS

ویژگی توضیحات
border تمامی ویژگی‌های کادر (به انگلیسی: border) را در یک اعلان تنظیم می‌کند
border-collapse مشخص می‌کند که آیا کادرهای جدول می‌بایست تقسیم شوند یا نه
border-spacing فاصله بین کادرهای سلول‌های مجاور در جدول را مشخص می‌کند
caption-side محل قرارگیری عنوان جدول را مشخص می‌کند.
empty-cells مشخص می‌کند که آیا کادر و پس زمینه در سلول‌های خالی باید نمایش داده شود یا خیر
table-layout الگورتیم چیدمان مورد استفاده برای یک جدول را تنظیم می‌کند


منابع آموزشی