Learn 55 Table concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Presents related records in labelled rows and columns using native table semantics.
Create an accessible semantic HTML data table for project records with a descriptive caption, one thead and tbody, th elements with correct scope values, concise headers, properly aligned text and numbers, readable row hover states, no layout-table misuse, and a plain linear reading order at narrow widths.Associates a visible title or description directly with a table.
Create a semantic table with a visible caption that identifies its subject and time period, optional supporting description connected with aria-describedby, concise column headers, and no duplicated heading that causes repetitive screen-reader announcements.Uses the first cell of each row as a header for the remaining row values.
Create an accessible table where the first cell in every body row is a th with scope row, column headers use scope col, numeric cells retain their row and column context, and the layout remains understandable when zoomed or linearized.Uses multiple header rows to label nested column groupings.
Create an accessible table with two header levels for grouped quarterly measures. Use colspan and scope colgroup for group headers, scope col for leaf headers, stable column order, visually distinct hierarchy, and explicit headers associations when scope alone cannot describe the relationships.Visually and semantically groups related columns under shared headings.
Create a grouped-column table separating customer, usage, and billing fields. Use colgroup or semantic header grouping, subtle dividers rather than excessive borders, clear units in leaf headers, keyboard-reachable controls, and a responsive alternative that preserves each group label.Places aggregate totals or summaries in a clearly separated table footer.
Create a financial table with a semantic tfoot containing subtotal, tax, and grand total rows. Align currency consistently, use tabular numerals, distinguish totals without relying only on bold text, explain calculation scope, and keep the footer associated with the correct columns on mobile.Alternates row backgrounds to help readers track across wide tables.
Create an accessible striped table for a moderately wide dataset. Keep stripe contrast subtle but perceivable, preserve readable selected and hover states, avoid using striping as the only row boundary, maintain sufficient text contrast in every theme, and retain semantic table markup.Uses spacing and minimal dividers for text-heavy tabular content.
Create a borderless table for text-heavy policy information using generous spacing, one subtle divider per row, strong alignment, clear headers, comfortable line length, visible keyboard focus for links, and enough grouping that rows remain distinguishable at high zoom.Reduces row height to fit more short, primarily numeric values.
Create a compact data table for dense numerical monitoring data. Keep header and row heights consistent, maintain at least usable pointer and focus targets for controls, use tabular numerals, avoid compact mode for multiline prose, offer a comfortable-density preference, and preserve legibility at 200 percent zoom.Reorders rows by activating one column header at a time.
Create an accessible sortable HTML table. Put a real button inside every sortable th, set aria-sort only on the active header, cycle unsorted, ascending and descending states, announce the new order politely, keep sorting stable for equal values, handle numbers and dates correctly, and preserve keyboard focus after sorting.Sorts by several columns in a visible priority order.
Create an accessible table that supports ordered multi-column sorting. Show numbered sort priorities, provide keyboard controls to add, reverse, reorder, or remove each criterion, describe the active sort sentence in a live region, use stable sorting, and offer a clear reset action.Filters visible rows using a table-scoped text search.
Create a searchable data table with a visible labelled search field scoped to the table, debounced matching across documented columns, highlighted matches that do not alter accessible text, an announced result count, a clear button, preserved sorting and pagination rules, and a distinct no-results state.Narrows rows using one or more structured filter controls.
Create an accessible filterable table with status, owner, and date filters. Show active filters as removable chips, announce the result count, preserve filter state in the URL when appropriate, provide clear-all, keep column headers visible, support an explicit apply action for expensive queries, and distinguish no results from an empty dataset.Places a filter control directly under or within each relevant column header.
Create a table with column-specific filters for name, status, amount, and date. Associate each control with its column, prevent filter inputs from triggering sort, support keyboard operation and clear states, summarize all active criteria, avoid cramped controls on mobile, and preserve filters while paging.Splits a large dataset into numbered or sequential pages.
Create an accessible paginated data table with total item count, visible range, page-size control, previous and next buttons, direct page selection when useful, disabled boundary states, preserved sort and filters, server-side query support, focus moved to the updated table caption or first row, and a polite update announcement.Loads stable next or previous result windows without relying on page numbers.
Create a server-backed cursor-paginated table for frequently changing records. Use opaque next and previous cursors, preserve sort direction and filters, show the visible result range without claiming an unreliable total, restore focus after navigation, handle expired cursors, and retain a stable row key to avoid duplicates.Groups table-wide search, filters, display settings, and primary actions.
Create an accessible table toolbar containing table-scoped search, filters, column settings, export, and one primary create action. Keep actions under five before using overflow, label icon-only controls, maintain logical keyboard order, show active state and result count, and reflow without covering the table on mobile.Allows exactly one row to be selected for a related operation or detail panel.
Create an accessible single-select table using radio buttons or an appropriate grid selection model. Keep selection distinct from keyboard focus, label each control with the row identity, allow the full row to reinforce but not replace the control, announce the selected record, and preserve selection through sorting when valid.Uses checkboxes to select any number of rows independently.
Create an accessible multi-select table with a labelled checkbox in every row, a select-all control with checked, unchecked and indeterminate states, clear rules for selecting the current page versus all results, persistent row keys, visible selection count, and selection preserved or cleared predictably after filtering.Replaces or augments the toolbar with actions for selected rows.
Create an accessible batch-action table where selecting rows reveals a clearly labelled action bar with the selection count, safe actions, a cancel-selection control, disabled states when mixed rows are incompatible, confirmation for destructive operations, progress and partial-failure feedback, and focus restoration after completion.Provides contextual actions from an overflow menu in each row.
Create a table with a labelled overflow action menu per row. Include the row name in the button's accessible label, keep common primary actions visible instead of hidden, open the menu next to its trigger, support full keyboard interaction and Escape, prevent clipping inside scroll containers, and restore focus after actions.Shows one or two frequent row actions directly inside an actions column.
Create a table with visible View and Edit actions in the final column. Use descriptive accessible names that include the row identity, keep targets large enough, avoid repeating too many tab stops in very long tables, distinguish links from commands, show pending states per row, and keep the actions column visible when horizontally scrolling.Makes a row open a record while preserving usable links and controls inside it.
Create a table whose rows navigate to record details without invalid nested interactive elements. Keep one real descriptive link in the primary cell, optionally enlarge its hit area with CSS, preserve text selection and secondary controls, show hover and focus together, support open-in-new-tab behavior, and never rely on JavaScript click handlers alone.Lets users change row order with drag handles and keyboard alternatives.
Create an accessible row-reorder table with a dedicated drag handle, grab and drop feedback, keyboard move-up and move-down commands, current and destination position announcements, auto-scroll, cancel behavior, persistent ordering, visible unsaved changes, and no conflict with text selection or column sorting.Switches an individual table cell between read and edit modes.
Create an accessible inline-edit table where Enter or an Edit control activates one cell, the original value remains available for cancellation, validation is announced in context, Enter saves and Escape cancels when safe, focus remains in the edited cell, dirty state is visible, and edits are not committed on blur unexpectedly.Edits several related cells in one row as a small form.
Create a table with explicit row edit mode. Replace supported cells with labelled inputs, keep unsupported values readable, show Save and Cancel in the row, validate all row fields with an error summary and inline messages, prevent conflicting row actions, announce save progress and result, and restore focus to the Edit trigger.Supports spreadsheet-like navigation and editing across many cells.
Create an accessible editable data grid following the ARIA grid pattern with one tab stop, arrow-key cell navigation, Home and End support, Enter or F2 to enter edit mode, Escape to cancel, clear focus versus selection styling, labelled row and column context, pasted-range validation, and a simpler form alternative for mobile.Uses managed focus so arrow keys move efficiently through interactive cells.
Create a read-only interactive data grid with a single tab stop and roving tabindex. Support arrow keys, Home, End, Control plus Home or End, Page Up and Page Down where relevant, visible focus independent from selection, correct row and column counts for virtualized data, and documented entry and exit behavior.Provides a dedicated row or action for creating another record in context.
Create a table with an Add row action that inserts an accessible in-context form without shifting focus unpredictably. Provide labelled cells, sensible defaults, validation, Save and Cancel, duplicate prevention, pending state, server-error recovery, and move focus to the created row or a clear success message after saving.Marks invalid editable cells and provides row and table-level error recovery.
Create an editable table with required, range, and cross-cell validation. Mark errors with text and icons beyond color, connect messages with aria-describedby, provide an error summary linked to each invalid cell, prevent ambiguous partial saves, preserve user input after server rejection, and support keyboard movement between errors.Copies and pastes individual cells or rectangular ranges.
Create an accessible data grid with copy and paste for selected cells and rectangular ranges. Show the active range, use tab-separated clipboard data, validate dimensions and cell types before applying, preview destructive overwrites, announce copied and pasted counts, support undo, and protect hidden or read-only columns.Reveals secondary details immediately beneath a parent row.
Create an accessible expandable-row table with a labelled disclosure button in the first cell, synchronized aria-expanded and aria-controls, a detail row spanning the correct columns, one expanded state per record, keyboard operation, focus that remains on the trigger, and details that do not duplicate primary-cell content.Combines hierarchical expandable rows with interactive tabular columns.
Create an accessible treegrid for nested project tasks following the ARIA treegrid pattern. Provide row and gridcell focus, arrow-key navigation, aria-level, aria-expanded only on parent rows, clear focus versus selection, lazy-loading feedback, persistent expansion state, and a simpler indented table fallback where assistive-technology support is uncertain.Organizes rows into labelled sections followed by intermediate totals.
Create a table grouped by region with semantic group labels, rows kept adjacent to their group, a subtotal after each section, a grand total in tfoot, correct currency alignment, group-aware sorting, optional collapse controls with announced states, and no fake rows that confuse header associations.Uses a selected table row to populate a related detail panel.
Create an accessible master-detail table where selecting a record updates an adjacent detail panel. Keep selection separate from focus, label the relationship, announce the new detail heading, preserve selected row visibility, support deep links and browser history, stack the panel below on mobile, and provide a direct details link per row.Aggregates measures across configurable row and column dimensions.
Create an accessible pivot table for sales by region, product, and quarter. Label row and column dimension hierarchies, expose aggregation functions and units, provide subtotals and grand totals, support keyboard-controlled dimension changes, preserve expanded groups, announce recalculation, handle empty intersections, and allow export of the visible configuration.Aligns alternatives across equivalent criteria for direct evaluation.
Create an accessible comparison table with products as columns and equivalent criteria as rows. Use row headers, concise cell values beyond checkmarks alone, sticky identifiers on wide screens, honest unavailable and not-applicable states, optional difference highlighting, a mobile choose-two comparison, and no misleading recommended emphasis.Compares plan prices, limits, and included capabilities.
Create an accessible pricing matrix showing monthly and annual totals, billing period, taxes, plan limits, included and excluded features using text plus icons, one non-misleading recommended tier, sticky plan headers, clear contact-sales states, responsive plan selection, and a link to full billing terms.Maps roles or users against resources and allowed capabilities.
Create an accessible permissions matrix with resources as rows and roles as columns. Use labelled native checkboxes, parent and child indeterminate states, read-only inherited indicators, explicit deny versus unset states, frozen row headers, keyboard-efficient navigation, unsaved-change feedback, audit context, and confirmation for broad access changes.Contains wide columns inside a keyboard-focusable horizontal scroll region.
Create an accessible horizontally scrollable table for dense data. Keep overflow inside a labelled focusable container, show a visible focus ring and scroll affordance, preserve the first useful column when possible, avoid page-level horizontal scrolling, support touch and keyboard scrolling, and provide export or column-visibility controls.Keeps column headings visible while long table rows scroll vertically.
Create a long table with a sticky semantic thead. Keep header widths aligned with cells, account for page and container headers, preserve sufficient contrast and borders while stuck, avoid cloning headers that duplicate announcements, support zoom and nested scrolling carefully, and test keyboard focus near the scroll boundary.Pins identifying columns while the remaining columns scroll horizontally.
Create a wide table with the record-name column frozen during horizontal scrolling. Use CSS sticky without duplicating semantic cells, maintain correct z-index and opaque backgrounds, add a boundary shadow only when content is hidden, preserve row alignment, support RTL, and let users unpin columns when space is limited.Lets users adjust individual column widths with pointer and keyboard controls.
Create an accessible resizable-column data grid with visible separators, a minimum and maximum width, pointer drag and keyboard increment controls, the current width announced through an appropriate separator or labelled control, double-click auto-fit, persisted preferences, and no loss of cell content or focus.Allows columns to be moved into a user-defined order.
Create an accessible reorderable-column table with header drag handles and keyboard Move left or Move right actions. Announce the new position, preserve header-cell relationships, prevent moving required identity columns when necessary, persist preferences, support reset, and keep sorting and filtering attached to the moved column.Lets users choose which optional columns are displayed.
Create a table column-visibility menu with checked items, required columns that cannot be hidden, Select all and Reset actions, keyboard operation, persisted preferences, accurate aria-colcount and aria-colindex for grids with removed DOM columns, an announcement after changes, and no hidden data included in copy without disclosure.Transforms each row into a labelled vertical record at narrow widths.
Create a responsive table that becomes stacked labelled records on small screens. Add each column label to its data cell without duplicating screen-reader output, promote the row's identity, preserve row actions and status, avoid the technique for dense numeric comparison, keep a true table at wider breakpoints, and test 400 percent zoom.Shows stable placeholder rows while initial table data is loading.
Create an accessible table loading state with a stable caption and headers, a small number of skeleton rows matching the expected structure, aria-busy on the table region, non-announced decorative placeholders, no fake interactive controls, reduced-motion support, and a transition that preserves focus and dimensions when data appears.Explains that the dataset has no records yet and offers an appropriate next step.
Create an empty state inside the table region that preserves the title and headers when helpful, states that no records exist yet, offers one relevant create or import action, avoids implying an error, remains associated with the table caption, and does not render meaningless blank rows or pagination.Explains that active search or filters returned no matching rows.
Create a no-results table state that preserves the user's search and filters, states which criteria produced zero matches, offers Clear filters and edit-search actions, keeps the result count announced, distinguishes this state from a genuinely empty dataset, and restores the prior rows without a full page reload.Reports a failed data request while preserving recoverable table context.
Create an accessible table error state with a concise problem explanation, safe Retry action, optional reference code, preserved filters and sort, stale-data handling when cached rows exist, aria-live announcement without repeated noise, focus management after retry, and a support route for persistent failures.Updates streaming rows or values while allowing users to pause and inspect changes.
Create an accessible live-updating table for operational events with a visible Live or Paused state, user-controlled pause, stable row keys, highlighted changes that do not rely only on animation, batched polite announcements, preserved focus and scroll position, timestamp and time zone, and a clear rule for expired rows.Renders only the visible window of a very large dataset for performance.
Create an accessible virtualized data grid for hundreds of thousands of rows. Maintain predictable row height, overscan focused cells, expose total aria-rowcount and correct aria-rowindex, keep keyboard navigation working beyond the rendered window, preserve selection by stable key, announce loading gaps, offer search or jump controls, and test with screen readers before release.Presents hierarchical accounting lines across comparable periods.
Create an accessible financial statement table with hierarchical row labels, current and comparison periods, currency and scale in the caption, tabular numerals, negative values formatted consistently, subtotals and totals, expandable notes, variance columns with signed values beyond color, print styling, and export that preserves precision.Lists chronological debits, credits, and running balances.
Create an accessible transaction ledger with date, description, reference, debit, credit, and running balance columns. Use exact decimal handling, aligned tabular numerals, explicit signs and currency, chronological sort, reconciliation status beyond color, expandable transaction details, filter and export controls, and totals that match the visible scope.Maps time slots against days, rooms, people, or resources.
Create an accessible timetable with days as columns and time slots as row headers. Use semantic headers, handle events spanning rows without losing associations, include event name, location and status as text, support keyboard navigation and conflict announcements, adapt to an agenda list on mobile, label the time zone, and preserve empty time slots only when meaningful.