Table Block

The Table Block is a comprehensive and highly customizable component designed to help you create professional data tables, comparison charts, pricing grids, and feature lists on your WordPress site. This versatile block offers multiple layout presets, extensive styling options, interactive cell controls, and responsive design features to meet all your table creation needs.

Key Features

The Table Block includes a robust set of features for creating sophisticated data displays:

Multiple Layout Presets: Choose from Default, Striped, Bordered, Borderless, Modern, and Minimal styles

Flexible Table Structure: Configure headers, footers, and first column styling independently

Interactive Cell Controls: Add checkmarks, crosses, star ratings, and custom icons to cells

Responsive Design: Stack or scroll modes for optimal mobile display

Advanced Typography: Independent font controls for headers, body, and footer content

Color Customization: Complete color control for all table elements including hover states

Border & Shadow Effects: Comprehensive border styling and box shadow options

Cell Alignment: Flexible text alignment options for different table sections

Animation Effects: Choose from various entrance animations to enhance engagement

Content Management: Easy row and column addition, deletion, and reordering

Adding the Table Block

To add a Table Block to your page:

1. Click the “+” icon to open the block inserter
2. Search for “Table” or navigate to the “DigiBlocks” category
3. Click on the “Table” block to add it to your page
4. The block will appear with a default 3×3 table structure that you can customize

The block initializes with sample content including headers and data rows, providing a starting point for your customization.

Managing Table Content

Editing Cell Content

Text Editing:

• Click on any cell to start editing its content inline
• Use the rich text toolbar for basic formatting (bold, italic)
• Press Tab to move to the next cell, Shift+Tab to move to the previous cell
• All table sections support rich text editing capabilities

Cell Selection:

• Click on any cell to select it for styling or adding special controls
• Selected cells are highlighted with a blue outline
• The cell coordinates are displayed in the control toolbar when selected

Row Management

Adding Rows:

• Use the “Add Row” button below the table to append new rows
• Use the toolbar “Add Row Before” or “Add Row After” buttons for precise placement
• New rows automatically match the column count of existing rows

Deleting Rows:

• Select any cell in the target row and use the “Delete Row” toolbar button
• Tables must maintain at least one row to prevent empty tables
• Header and footer rows require special consideration when deleting

Row Controls:

• Access row controls through the block toolbar when a cell is selected
• Toolbar buttons provide visual feedback for available actions
• Disabled states prevent accidental deletion of essential rows

Column Management

Adding Columns:

• Use the “Add Column” button below the table to append new columns
• Use toolbar “Add Column Before” or “Add Column After” for specific positioning
• New columns are added to all rows including headers and footers

Deleting Columns:

• Select any cell in the target column and use the “Delete Column” toolbar button
• Tables must maintain at least one column for structural integrity
• Column deletion affects all table sections simultaneously

Column Consistency:

• All rows automatically maintain the same number of columns
• Column operations update header, body, and footer sections uniformly

Cell Controls and Icons

Icon Types: The Table Block supports several types of cell icons for enhanced data presentation:

• Checkmarks: Green circular checkmarks for positive indicators
• Crosses: Red circular crosses for negative indicators
• Star Ratings: 1-5 star rating displays with filled and empty stars
• Custom Icons: Additional icon options for specialized content

Adding Cell Icons:

1. Select the target cell by clicking on it
2. Use the cell control toolbar that appears above the table
3. Choose from Check, Cross, or Rating buttons
4. For ratings, select the number of stars (1-5) from the popup selector
5. Icons appear alongside the cell text content

Managing Cell Icons:

• Only one icon type can be active per cell (check/cross OR stars)
• Use the “Remove Icons” button to clear all icons from a selected cell
• Icons automatically position themselves based on text alignment settings
• Icons maintain consistent styling across different table presets

Table Structure Options

Header Configuration

Enable Header Row: When enabled, the first row of your table becomes a dedicated header section with:

• Distinct background and text color options
• Independent typography controls
• Bold formatting by default
• Different alignment options from body cells

Header Styling: Headers support comprehensive customization including background colors, text colors, and complete typography control for creating clear visual hierarchy.

Footer Configuration

Enable Footer Row: When enabled, the last row becomes a footer section featuring:

• Separate styling controls from headers and body content
• Independent color and typography settings
• Useful for totals, summaries, or additional information
• Automatic responsive behavior in mobile stack mode

First Column Headers

First Column as Header: This option treats the first column as row headers, providing:

• Header-style formatting for the first column of each row
• Useful for comparison tables and data matrices
• Maintains header styling even in alternating row configurations
• Responsive behavior preserves header status on mobile devices

Table Presets

The Table Block offers six professionally designed presets for quick styling:

Default Preset

A clean, professional appearance with:

• Light gray header background (#f8f9fa)
• Standard borders and spacing
• Balanced color scheme suitable for most content
• Conservative styling that works with any theme

Striped Preset

Enhanced readability through alternating row colors:

• Alternating row backgrounds for easier data scanning
• Subtle gray striping on even rows
• Maintains professional appearance while improving usability
• Ideal for data-heavy tables with many rows

Bordered Preset

Strong visual definition with prominent borders:

• Heavier border weights for clear cell separation
• Emphasized table structure
• Good for tables requiring clear data compartmentalization
• Professional appearance suitable for reports and documentation

Borderless Preset

Clean, modern appearance without visual barriers:

• Removes all borders for minimal design
• Relies on spacing and typography for structure
• Perfect for simple data displays and modern designs
• Reduces visual clutter while maintaining readability

Modern Preset

Contemporary styling with enhanced visual appeal:

• Blue header background (#4a6cf7) with white text
• Subtle box shadow for depth
• Rounded corners for modern appearance
• Light gray alternating rows for improved readability
• Professional yet approachable design

Minimal Preset

Stripped-down design focusing entirely on content:

• Minimal borders and neutral colors
• Clean typography with ample white space
• Subtle styling that doesn’t compete with content
• Perfect for text-heavy tables and simple data displays

Responsive Design

Mobile Behavior Options

Stack Mode: On mobile devices (screens below 768px), tables automatically transform into a stacked layout:

• Each row becomes an individual card
• Column headers appear as labels for each data point
• Maintains data relationships while optimizing for small screens
• Individual cards can have their own shadows and borders
• Eliminates horizontal scrolling issues

Scroll Mode: Maintains the traditional table layout on all devices:

• Table becomes horizontally scrollable on small screens
• Preserves original table structure and relationships
• Minimum width ensures readability while allowing scroll navigation
• Useful for tables where structure is more important than mobile optimization

Responsive Considerations

Header Handling: In stack mode, table headers are hidden and their content appears as labels within each stacked row

Footer Handling: Footer rows are hidden in stack mode as they typically contain summary information less relevant in the mobile context

First Column Headers: These maintain their styling even in stack mode, appearing as prominent labels in the card layout

Styling Options

Border and Shadow Controls

Border Styling: Comprehensive border controls include:

• Border style options: solid, dotted, dashed, double, or none
• Adjustable border width from 1-10 pixels
• Custom border colors with alpha transparency support
• Border collapse options for different visual effects

Border Radius: Responsive border radius controls allow you to:

• Create rounded corners with pixel or percentage values
• Set different radius values for each corner independently
• Adjust radius responsively for different screen sizes
• Coordinate with table presets for cohesive design

Box Shadow Effects: Advanced shadow controls provide:

• Normal state shadows for default appearance
• Hover state shadows for interactive feedback
• Position controls (inset/outset) for different effects
• Color, blur, spread, and offset customization
• Multiple shadow layers for complex effects

Color Customization

Header Colors: Independent color controls for table headers:

• Background color with transparency support
• Text color for optimal contrast
• Colors automatically apply to header rows and first column headers when enabled

Body Colors: Flexible body styling options:

• Primary background color for standard cells
• Alternate row background color for striped effects
• Text color that applies to all body content
• Colors work in conjunction with table presets

Footer Colors (when enabled): Separate color controls for footer sections:

• Distinct background color options
• Independent text color settings
• Allows for visual separation of summary information

Typography Controls

Header Typography: Complete font control for header content:

• Font family selection from available options
• Responsive font sizes for optimal display across devices
• Font weight options from light to bold
• Font style including italic options
• Text transform (uppercase, lowercase, capitalize)
• Text decoration including underline options
• Line height for proper vertical spacing
• Letter spacing for refined typography

Body Typography: Independent typography settings for body content:

• Full font customization separate from headers
• Responsive sizing for different screen sizes
• Complete style control for body text
• Optimal readability settings across all devices

Footer Typography (when enabled): Dedicated typography controls for footer content:

• Independent font settings from headers and body
• Suitable for summary or supplementary information
• Complete responsive typography control

Text Alignment

Header Alignment: Control text alignment within header cells:

• Left alignment for standard header layouts
• Center alignment for balanced presentations
• Right alignment for numerical headers
• Affects both header rows and first column headers

Body Alignment: Text alignment for all body content:

• Left alignment for text-heavy content
• Center alignment for short data points
• Right alignment for numerical data
• Consistent alignment across all body cells

Footer Alignment (when enabled): Independent alignment control for footer content:

• Separate from header and body alignment settings
• Ideal for summary information presentation

Spacing Controls

Cell Padding

Responsive Padding: Control internal cell spacing with responsive dimension controls:

• Independent top, right, bottom, and left padding values
• Responsive adjustments for different screen sizes
• Pixel, em, or percentage units available
• Affects all table cells uniformly

Default Values: Tables initialize with balanced 15px padding on all sides, providing comfortable spacing that works well with most content types and table sizes.

Margin Controls

Table Margin: Control the space around the entire table:

• Responsive margin controls for all screen sizes
• Independent margin values for each side
• Default bottom margin for proper content separation
• Integration with page layout requirements

Advanced Features

Animation Effects

Animation Types: Choose from a variety of entrance animations:

• Fade effects (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight)
• Slide effects (slideInUp, slideInDown, slideInLeft, slideInRight)
• Zoom effects (zoomIn, zoomInUp, zoomInDown)
• Bounce effects (bounceIn, bounceInUp, bounceInDown)
• Rotation effects (rotateIn, rotateInDownLeft, rotateInDownRight)

Animation Preview: Test animations in the editor using the preview button before publishing, ensuring the chosen effect enhances rather than distracts from your content.

Visibility Controls

Device-Specific Visibility: Control table visibility across different devices:

• Hide on Desktop: Remove tables from desktop displays (992px and up)
• Hide on Tablet: Hide tables on tablet screens (768px to 991px)
• Hide on Mobile: Remove tables from mobile displays (767px and below)

Editor Behavior: Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.

HTML and CSS Customization

HTML Anchor: Create direct links to your table:

• Add unique anchor IDs for page navigation
• Enable deep linking to specific table sections
• Improve page navigation and user experience

Additional CSS Classes: Extend table styling with custom CSS:

• Add multiple CSS classes separated by spaces
• Integrate with custom theme styles
• Enable advanced customization beyond built-in options

Data Organization Best Practices

Content Structure

Logical Hierarchy:

• Organize data from most important to least important columns
• Use headers that clearly describe column content
• Consider the natural reading flow of your audience
• Group related information in adjacent columns

Data Types:

• Use consistent data formats within columns (dates, currencies, numbers)
• Align numerical data to the right for easy comparison
• Keep text content concise for better mobile experience
• Use cell icons to enhance data comprehension

Visual Design

Color Usage:

• Maintain sufficient contrast between text and background colors
• Use alternating row colors for tables with many rows
• Limit color variations to avoid visual confusion
• Consider accessibility requirements for color-blind users

Typography Hierarchy:

• Make headers visually distinct from body content
• Use consistent font sizes within each table section
• Ensure text remains readable at all screen sizes
• Balance font weights to create clear information hierarchy

Responsive Considerations

Mobile Optimization:

• Choose stack mode for content-heavy tables
• Use scroll mode for tables where structure is critical
• Test table functionality on actual mobile devices
• Consider breaking large tables into smaller, focused sections

Content Adaptation:

• Write concise header labels that work well as mobile labels
• Ensure important information remains visible in both layouts
• Consider the mobile user’s context and needs
• Prioritize the most important data for mobile display

Performance Optimization

Table Size Management

Row and Column Limits:

• Keep tables focused on essential information
• Consider pagination for very large datasets
• Break complex tables into multiple smaller tables
• Use summary rows effectively rather than extensive detail

Content Optimization:

• Optimize images if included in table cells
• Keep text content concise but informative
• Avoid excessive styling that might impact load times
• Test table performance with realistic content volumes

Loading Considerations

Animation Usage:

• Use animations sparingly to avoid overwhelming users
• Choose subtle animations that enhance rather than distract
• Consider the cumulative effect of multiple animated elements on a page
• Test animation performance across different devices

Asset Management:

• The Table Block generates optimized CSS and JavaScript automatically
• Custom fonts are loaded efficiently based on usage
• Responsive breakpoints are optimized for common device sizes

Accessibility Features

Keyboard Navigation

Tab Navigation:

• Users can navigate through table cells using Tab and Shift+Tab
• Proper focus indicators help users understand their position
• Keyboard navigation respects table structure and flow

Screen Reader Support:

• Tables include proper semantic markup for assistive technologies
• Header associations help screen readers convey table structure
• ARIA labels provide additional context where needed

Visual Accessibility

Color Contrast:

• Ensure adequate contrast ratios between text and background colors
• Test color combinations with accessibility tools
• Provide alternative visual cues beyond color alone

Text Readability:

• Maintain readable font sizes across all devices
• Use clear, legible font families
• Provide sufficient line height for comfortable reading

The Table Block provides a comprehensive solution for creating professional, accessible, and responsive data tables that enhance user experience while maintaining design flexibility and performance optimization across all devices and contexts.