📊 Table Typography Guide

Tables є essential tool для organizing structured data: species characteristics, dosage guidelines, cultivation parameters, research findings. Well-designed tables transform complex information into scannable, comparable format. However, default browser table styling often looks dated та unprofessional. Custom CSS transforms tables від boring grids into polished data presentations що match site aesthetics while maintaining readability. Цей guide охоплює header styling, zebra striping, hover effects, cell spacing, responsive techniques, та accessibility best practices для mushroom education content.

🎨 Table Style Examples

Style 1: Classic Bordered з Gradient Header

Species Potency (% psilocybin) Difficulty Climate
P. cubensis 0.63% Beginner Tropical/Subtropical
P. azurescens 1.78% Advanced Temperate (outdoor)
P. semilanceata 0.98% Wild-gathering Cool, moist grasslands
P. cyanescens 0.85% Intermediate Wood chips, mulch

Style 2: Zebra Striping з Dark Header

Dosage (dried) Effect Level Duration Experience Level
0.1-0.5g Microdose 4-6 hours All levels
1-2g Mild 4-6 hours Beginners
2-3.5g Moderate 4-7 hours Experienced
3.5-5g Strong 6-8 hours Very experienced
5g+ Heroic 6-10 hours Experts only

Style 3: Minimal Clean (No background)

Growth Phase Temperature Humidity Duration
Inoculation 70-75°F N/A 1 day
Colonization 75-80°F N/A 2-4 weeks
Pinning 70-75°F 95-100% 5-10 days
Fruiting 70-75°F 90-95% 5-12 days

💻 CSS Implementation

1. Basic Table Structure:

/* Always use border-collapse */
table {
  width: 100%;
  border-collapse: collapse; /* Critical для clean borders */
  margin: 30px 0;
}

/* Header styling */
th {
  padding: 15px 18px;
  text-align: left;
  font-weight: 600;
  background: #2c3e50;
  color: white;
}

/* Cell styling */
td {
  padding: 14px 18px;
  border-bottom: 1px solid #e9ecef;
}

/* Remove last border */
tr:last-child td {
  border-bottom: none;
}

2. Zebra Striping:

/* Alternate row colors */
tbody tr:nth-child(even) {
  background: #f8f9fa;
}

tbody tr:nth-child(odd) {
  background: white;
}

3. Hover Effects:

/* Row hover */
tbody tr:hover {
  background: #fef8fd;
  cursor: pointer;
  transition: background 0.2s;
}

/* Cell hover (less common) */
td:hover {
  background: #fff5f8;
}

4. Responsive Tables:

/* Option 1: Horizontal Scroll */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Option 2: Stacked Cells (More complex) */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    display: none; /* Hide headers */
  }
  
  tr {
    margin-bottom: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
  }
  
  td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  td::before {
    content: attr(data-label); /* Column label */
    position: absolute;
    left: 15px;
    font-weight: 600;
    text-align: left;
  }
}

/* HTML requires data-label attributes */
<td data-label="Species">P. cubensis</td>

5. Advanced: Sortable Tables

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

th.sortable:hover {
  background: #3d4f60;
}

th.sortable::after {
  content: " ⇅"; /* Up/down arrows */
  opacity: 0.5;
}

th.sorted-asc::after {
  content: " ↑";
  opacity: 1;
}

th.sorted-desc::after {
  content: " ↓";
  opacity: 1;
}

♿ Accessibility Best Practices

Semantic HTML:

<table>
  <caption>Psilocybe Species Comparison</caption> <!-- Describes table -->
  <thead>
    <tr>
      <th scope="col">Species</th> <!-- scope critical для screen readers -->
      <th scope="col">Potency</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">P. cubensis</th> <!-- Row header -->
      <td>0.63%</td>
    </tr>
  </tbody>
</table>

Color Contrast:

  • ✅ Header text: White на dark background (21:1 ratio)
  • ✅ Body text: Dark на white/light (4.5:1 minimum)
  • ❌ Don't rely solely на color для meaning

✅ Table Design Checklist

Implementation Checklist:

  • ☐ border-collapse: collapse applied
  • ☐ Header visually distinct (background color, bold)
  • ☐ Cell padding: 12-18px для readability
  • ☐ Border styles consistent
  • ☐ Zebra striping (optional but recommended)
  • ☐ Hover effects на rows
  • ☐ Responsive: Horizontal scroll або stacked cells
  • ☐ <caption> describes table content
  • ☐ scope attribute на <th> elements
  • ☐ Color contrast meets WCAG AA (4.5:1)
  • ☐ Text alignment: Left для text, right для numbers
  • ☐ Tested з screen readers