جدول CSS

استفاده از CSS می‌تواند ظاهر HTML جدول‌ها را به طور قابل توجهی بهبود بخشد:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

به طور شخصی امتحان کنید

لبه‌های جدول

برای تنظیم لبه‌های جدول در CSS، از border ویژگی‌ها.

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

نام نام خانوادگی
Bill Gates
Steve Jobs

مثال

table, th, td {
  border: 1px solid black;
}

به طور شخصی امتحان کنید

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

جدول کامل عرض

در برخی موارد، جدول بالا ممکن است خیلی کوچک به نظر برسد. اگر نیاز به جدولی دارید که کل صفحه را پوشش دهد (کامل عرض)، برای عنصر <table> از width: 100% اضافه کنید:

مثال

table {
  width: 100%;
}

به طور شخصی امتحان کنید

لبه‌های دوطرفه

لطفاً توجه کنید که جدول بالا دارای لبه‌های دوطرفه است. این به دلیل اینکه جدول و عناصر th و td دارای لبه‌های جداگانه هستند.

برای حذف لبه‌های دوطرفه، به مثال زیر نگاه کنید.

یکپارچه کردن لبه‌های جدول

border-collapse ویژگی تنظیم این که آیا لبه‌های جدول به یک لبه تبدیل شوند یا خیر:

نام نام خانوادگی
Bill Gates
Steve Jobs

مثال

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

به طور شخصی امتحان کنید

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

نام نام خانوادگی
Bill Gates
Steve Jobs

مثال

table {
  border: 1px solid black;
}

به طور شخصی امتحان کنید

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

عرض و ارتفاع جدول توسط width و height تعریف ویژگی‌ها.

مثال زیر برای تنظیم عرض جدول به 100% و تنظیم ارتفاع عناصر <th> به 50px است:

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

table {
  width: 100%;
}
th {
  height: 50px;
}

به طور شخصی امتحان کنید

برای ایجاد جدولی که تنها نیمی از صفحه را اشغال کند، از width: 50% استفاده کنید:

مثال

table {
  width: 50%;
}
th {
  height: 70px;
}

به طور شخصی امتحان کنید

تراز افقی

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

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

برای قرارگیری محتوای عناصر <td> نیز به وسط، از text-align: center استفاده کنید:

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  text-align: center;
}

به طور شخصی امتحان کنید

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

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  text-align: left;
}

به طور شخصی امتحان کنید

تراز عمودی

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

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

مثال زیر برای تنظیم نحوه قرارگیری عمودی متن عناصر <td> به پایین است:

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

td {
  height: 50px;
  vertical-align: bottom;
}

به طور شخصی امتحان کنید

پادری جدول

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

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th, td {
  padding: 15px;
  text-align: left;
}

به طور شخصی امتحان کنید

خط افقی عمودی

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

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

مثال

th, td {
  border-bottom: 1px solid #ddd;
}

به طور شخصی امتحان کنید

استفاده کنید

جدول قابل لمس برای برجسته کردن ردیف جدول هنگام قرارگیری ماوس روی آن، از :hover

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

tr:hover {background-color: #f5f5f5;}

به طور شخصی امتحان کنید

جدول پارچه‌ای

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

برای ایجاد تأثیر جدول پارچه‌ای، از nth-child() انتخابگر، و برای همه ردیف‌های جدول حتی (یا غیرمساوی) اضافه کنید background-color:

مثال

tr:nth-child(even) {background-color: #f2f2f2;}

به طور شخصی امتحان کنید

رنگ جدول

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

نام نام خانوادگی ذخیره‌سازی
Bill Gates $100
Steve Jobs $150
Elon Musk $300

مثال

th {
  background-color: #4CAF50;
  color: white;
}

به طور شخصی امتحان کنید

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

اگر صفحه نمایش کوچک باشد و نتواند تمام محتوا را نمایش دهد، جدول واکنش‌گرا نوار прокسی افقی را نمایش می‌دهد:

نام نام خانوادگی Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

با افزودن overflow-x:auto عنصر نگه‌دارنده (مثلاً <div>)، برای ایجاد تأثیر واکنش‌گرا:

مثال

<div style="overflow-x:auto;">
<table>
... محتوای جدول ...
</table>
</div>

به طور شخصی امتحان کنید

نکته:در OS X Lion (در Mac)، نوار прокسی به صورت پیش‌فرض پنهان است و تنها زمانی نمایش داده می‌شود که استفاده می‌شود (حتی اگر "overflow:scroll" تنظیم شده باشد).

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

یک جدول زیبا درست کنید
این مثال نحوه ایجاد جدول‌های زیبا را نشان می‌دهد.
مکان عنوان جدول را تنظیم کنید
این مثال نحوه قرارگیری عنوان جدول را نشان می‌دهد.

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

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