طراحی Table‌های پیشرفته و ریسپانسیو با CSS

Table Design؛ نمایش زیبای اطلاعات داده‌ای

Table‌ها یکی از قدیمی‌ترین اما هنوز پرکاربردترین کامپوننت‌های وب هستند. از داشبوردها گرفته تا صفحات فروشگاه، Table‌ها همه جا استفاده می‌شوند. اما طراحی یک Table زیبا، خوانا و ریسپانسیو کار ساده‌ای نیست. یک Table بد طراحی شده می‌تواند تجربه کاربری را به‌شدت خراب کند. در این مقاله ۱۰ سبک مختلف Table را با CSS مدرن یاد می‌گیریم. 📊

۱. Modern Basic Table

Table پایه اما مدرن:

.table-modern {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.table-modern thead {
  background: linear-gradient(135deg, #660000, #880000);
  color: white;
}

.table-modern th {
  padding: 16px 20px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.table-modern td {
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
  font-size: 14px;
}

.table-modern tbody tr {
  transition: all 0.2s;
}

.table-modern tbody tr:hover {
  background: #fff8f8;
  transform: scale(1.005);
}

.table-modern tbody tr:last-child td {
  border-bottom: none;
}

/* Sortable header */
.table-modern th.sortable {
  cursor: pointer;
  user-select: none;
}

.table-modern th.sortable::after {
  content: " ⇅";
  opacity: 0.5;
  font-size: 12px;
}

.table-modern th.sortable.asc::after {
  content: " ↑";
  opacity: 1;
}

.table-modern th.sortable.desc::after {
  content: " ↓";
  opacity: 1;
}

۲. Striped Table

Table با ردیف‌های زوج و فرد رنگی:

.table-striped {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.table-striped thead {
  background: #660000;
  color: white;
}

.table-striped th {
  padding: 14px 18px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
}

.table-striped td {
  padding: 12px 18px;
  color: #333;
  font-size: 14px;
}

.table-striped tbody tr:nth-child(even) {
  background: #fafafa;
}

.table-striped tbody tr:hover {
  background: #fff8f8;
}

/* Zebra with color variations */
.table-striped-colored tbody tr:nth-child(odd) {
  background: white;
}

.table-striped-colored tbody tr:nth-child(even) {
  background: linear-gradient(90deg, #fff8f8, white);
}

۳. Card-Style Table

Table به‌سبک کارت با فاصله بین ردیف‌ها:

.table-cards {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.table-cards thead th {
  padding: 12px 20px;
  color: #999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: right;
  border-bottom: 1px solid #eee;
}

.table-cards tbody tr {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.table-cards tbody tr:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.table-cards tbody td {
  padding: 16px 20px;
  color: #333;
  font-size: 14px;
  border: none;
}

.table-cards tbody td:first-child {
  border-radius: 0 12px 12px 0;
}

.table-cards tbody td:last-child {
  border-radius: 12px 0 0 12px;
}

۴. Responsive Table با Scroll

Table ریسپانسیو با scroll افقی:

.table-responsive {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  scrollbar-width: thin;
  scrollbar-color: #660000 #f5f5f5;
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #660000;
  border-radius: 4px;
}

.table-responsive table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: white;
}

.table-responsive th {
  padding: 14px 20px;
  background: #660000;
  color: white;
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.table-responsive td {
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  white-space: nowrap;
}

.table-responsive td:first-child {
  position: sticky;
  right: 0;
  background: white;
  z-index: 1;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.05);
}

.table-responsive tr:hover td:first-child {
  background: #fff8f8;
}

۵. Table با Mobile Card View

Table که در موبایل به کارت تبدیل می‌شود:

.table-mobile-cards {
  width: 100%;
  border-collapse: collapse;
}

.table-mobile-cards thead th {
  padding: 14px;
  background: #660000;
  color: white;
  text-align: right;
}

.table-mobile-cards td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

@media (max-width: 640px) {
  .table-mobile-cards thead {
    display: none;
  }

  .table-mobile-cards, .table-mobile-cards tbody,
  .table-mobile-cards tr, .table-mobile-cards td {
    display: block;
    width: 100%;
  }

  .table-mobile-cards tr {
    margin-bottom: 12px;
    background: white;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .table-mobile-cards td {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table-mobile-cards td:last-child {
    border-bottom: none;
  }

  .table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #660000;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

۶. Table با Status Badges

Table با نمایش وضعیت با رنگ:

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.active {
  background: #dcfce7;
  color: #16a34a;
}

.status-badge.pending {
  background: #fef3c7;
  color: #d97706;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #dc2626;
}

.status-badge.new {
  background: #dbeafe;
  color: #2563eb;
}

.status-badge.premium {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  padding: 4px 14px;
}

/* User cell */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-cell .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #660000, #ff4444);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.user-cell .info h5 {
  color: #333;
  font-size: 14px;
  margin: 0 0 2px 0;
}

.user-cell .info p {
  color: #999;
  font-size: 12px;
  margin: 0;
}

/* Action buttons */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  background: white;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background: #fff8f8;
  border-color: #660000;
  color: #660000;
}

.action-btn.danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

۷. Table با Sort و Filter

Table تعاملی با قابلیت مرتب‌سازی:

.table-interactive {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.table-toolbar {
  padding: 16px 20px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.table-toolbar .search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.table-toolbar .search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  transition: all 0.2s;
}

.table-toolbar .search input:focus {
  outline: none;
  border-color: #660000;
  box-shadow: 0 0 0 3px rgba(102, 0, 0, 0.1);
}

.table-toolbar .search::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.table-toolbar .filter-btn {
  padding: 10px 20px;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #666;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.table-toolbar .filter-btn:hover {
  background: #fff8f8;
  border-color: #660000;
  color: #660000;
}

.table-toolbar .filter-btn.active {
  background: #660000;
  border-color: #660000;
  color: white;
}

.table-toolbar .add-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #660000, #880000);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.table-interactive table {
  width: 100%;
  border-collapse: collapse;
}

.table-interactive th {
  padding: 14px 20px;
  background: #fafafa;
  text-align: right;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.table-interactive td {
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
}

.table-interactive tr:hover {
  background: #fff8f8;
}

.table-interactive input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #660000;
  cursor: pointer;
}

۸. Compact Table

Table فشرده برای داده‌های زیاد:

.table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-compact thead {
  background: #660000;
  color: white;
}

.table-compact th {
  padding: 8px 12px;
  text-align: right;
  font-weight: 700;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.1);
}

.table-compact th:last-child {
  border-inline-end: none;
}

.table-compact td {
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
  border-inline-end: 1px solid #f5f5f5;
}

.table-compact td:last-child {
  border-inline-end: none;
}

.table-compact tr:hover td {
  background: #fff8f8;
}

/* Highlighted row */
.table-compact tr.highlight td {
  background: #fef3c7;
  font-weight: 700;
}

.table-compact tr.highlight:hover td {
  background: #fde68a;
}

۹. Pricing Comparison Table

Table مقایسه پلن‌های قیمت:

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.pricing-table thead {
  background: linear-gradient(135deg, #660000, #ff4444);
  color: white;
}

.pricing-table th {
  padding: 24px 20px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-table th:first-child {
  text-align: right;
  background: rgba(0, 0, 0, 0.15);
}

.pricing-table th.recommended {
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}

.pricing-table th.recommended::before {
  content: "★ توصیه شده";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffdd00;
  color: #660000;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.pricing-table .price {
  font-size: 32px;
  font-weight: 900;
  margin-top: 8px;
}

.pricing-table .price small {
  font-size: 14px;
  opacity: 0.8;
  font-weight: 400;
}

.pricing-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
  border-inline-end: 1px solid #f5f5f5;
  color: #666;
}

.pricing-table td:first-child {
  text-align: right;
  background: #fafafa;
  color: #333;
  font-weight: 700;
  border-inline-end: 1px solid #eee;
}

.pricing-table .check {
  color: #22c55e;
  font-size: 18px;
  font-weight: 900;
}

.pricing-table .cross {
  color: #ef4444;
  font-size: 18px;
}

.pricing-table tfoot td {
  padding: 24px 20px;
  background: #fafafa;
}

.pricing-table .buy-btn {
  padding: 12px 24px;
  background: #660000;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.pricing-table .buy-btn:hover {
  background: #880000;
  transform: translateY(-2px);
}

.pricing-table .buy-btn.premium {
  background: linear-gradient(135deg, #660000, #ff4444);
}

۱۰. Data Grid Table

Table داشبوردی حرفه‌ای:

.data-grid {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.data-grid table {
  width: 100%;
  border-collapse: collapse;
}

.data-grid thead {
  border-bottom: 2px solid #660000;
}

.data-grid th {
  padding: 16px 20px;
  text-align: right;
  color: #660000;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #fafafa;
}

.data-grid td {
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f5;
  color: #333;
}

.data-grid tr:hover td {
  background: #fff8f8;
}

/* Progress bar in cell */
.cell-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cell-progress .bar {
  flex: 1;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  max-width: 150px;
}

.cell-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, #660000, #ff4444);
  border-radius: 3px;
  transition: width 0.5s;
}

.cell-progress .value {
  font-weight: 700;
  color: #333;
  font-size: 13px;
  min-width: 40px;
}

/* Trend indicator */
.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
}

.trend.up {
  color: #22c55e;
}

.trend.down {
  color: #ef4444;
}

.trend.up::before {
  content: "↑";
}

.trend.down::before {
  content: "↓";
}

/* Table footer with pagination */
.data-grid tfoot td {
  padding: 16px 20px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

.pagination-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info .info {
  color: #666;
  font-size: 14px;
}

.pagination-buttons {
  display: flex;
  gap: 4px;
}

.pagination-buttons button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: white;
  border: 1px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.pagination-buttons button:hover {
  background: #fff8f8;
  border-color: #660000;
  color: #660000;
}

.pagination-buttons button.active {
  background: #660000;
  border-color: #660000;
  color: white;
}

نکات مهم و بهترین شیوه‌ها

• Semantic HTML: از table, thead, tbody, tfoot استفاده کنید
• Accessibility: caption و scope="col" برای هدر
• Sticky header برای Table‌های طولانی
• موبایل: Card view یا Scroll افقی
• Pagination برای داده‌های زیاد
• Loading state برای async data
• Empty state زیبا
• Sort و Filter برای UX بهتر
• Status badges واضح و رنگی
• Test در Screen Reader

جمع‌بندی

Table‌ها ابزار قدرتمندی برای نمایش داده‌ها هستند و طراحی درست آن‌ها می‌تواند تجربه کاربری را به‌شدت بهبود دهد. با ۱۰ سبک ارائه شده در این مقاله می‌توانید برای هر نوع داده‌ای، Table مناسب طراحی کنید. مهم‌ترین نکته این است که Table شما در موبایل هم کار کند. برای این کار می‌توانید از تبدیل به کارت یا scroll افقی استفاده کنید. همچنین توجه به Accessibility و Semantic HTML بسیار مهم است. 📊