جداول

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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	الگورتیم چیدمان مورد استفاده برای یک جدول را تنظیم می‌کند

صفحهٔ بعد»

«صفحهٔ قبل