User Rating 0.0 ★★★★★

Total Usage 0 times

Category HTML/XML Utilities

Paste HTML Table

Conversion Options

Add data-label attributes Add label spans in cells Hide label spans (CSS) Remove header row Preserve cell dimensions Enable alternate row classes Wrap thead/tbody/tfoot sections Preserve original classes

Header selector

Extra CSS classes

Indent spaces

Responsive CSS snippet

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

HTML tables remain structurally rigid across viewports. A 6-column table on a 320px screen forces horizontal scroll or content truncation. Both destroy usability. This converter parses raw <table> markup via the browser's native DOMParser and reconstructs every <tr> and <td> into semantically equivalent <div> elements with BEM-style class names. Column headers are optionally injected as data-label attributes on each cell, enabling pure CSS responsive patterns where labels appear inline on narrow screens. The tool preserves element attributes, optional inline dimensions, and alternate-row marking for striped styling.

Limitations: the converter does not handle deeply nested tables (tables inside cells) beyond one level. Merged cells via colspan and rowspan are carried as attributes but the responsive label mapping assumes a uniform column count per row. Complex colgroup-based width distributions require manual CSS adjustment after conversion. Pro tip: test your output at 320px, 768px, and 1024px breakpoints before shipping to production.

Formulas

The conversion follows a deterministic node-mapping algorithm. Each table element is mapped to a DIV equivalent with a BEM naming convention:

When addDataLabels is TRUE, the label injection follows a column-index mapping. Let H = [h₀, h₁, …, h_n−1] be the ordered text content of the header cells. For each body cell at column index i, the attribute data-label = h_i is applied. If i ≥ n (more body columns than headers), no label is added.

When enableAltRows is TRUE, each row at zero-based index j within its section receives: if j mod 2 = 0 → div-table__row--even, else → div-table__row--odd.

Reference Data

Option	Default	Type	Description
customHeaderTarget	th	CSS Selector	Targets header cells for label extraction. Use tr:first-child td if the table lacks <th> elements.
addLabelHeaders	FALSE	Boolean	Injects a <span class="div-table__label"> inside each body cell containing the corresponding column header text.
hideLabels	TRUE	Boolean	Adds display:none to label spans. Use CSS media queries to reveal them on small screens.
removeHeaders	FALSE	Boolean	Omits the original header row from the DIV output entirely. Useful when labels replace headers.
preserveDim	FALSE	Boolean	Copies explicit width and height attributes/styles from table cells to DIV cells as inline styles.
enableAltRows	FALSE	Boolean	Adds div-table__row--even and div-table__row--odd classes to alternating rows for zebra-stripe CSS.
classes	(empty)	String	Space-separated CSS classes appended to the root <div class="div-table"> wrapper element.
outputIndent	2 spaces	Number	Number of spaces per indentation level in the formatted output HTML.
addDataLabels	TRUE	Boolean	Adds data-label="Header" attributes to each body cell for CSS ::before content selectors.
wrapSections	TRUE	Boolean	Wraps <thead>, <tbody>, and <tfoot> groups in corresponding div-table__header, div-table__body, div-table__footer wrappers.
stripScripts	TRUE	Boolean	Removes all <script> tags and on* event attributes from parsed input for security.
preserveClasses	TRUE	Boolean	Retains original CSS classes from <td> and <tr> elements alongside generated BEM classes.

Frequently Asked Questions

The converter preserves colspan and rowspan as attributes on the generated DIV cells. However, since DIVs do not natively support cell spanning, you must implement the spanning behavior via CSS Grid or manual width calculations. The data-label mapping uses the column index of the cell as it appears in the DOM, which may be offset if preceding cells have colspan values greater than 1. For tables with complex merging, manually verify the label assignments after conversion.

Set the customHeaderTarget option to a CSS selector that matches your header cells. For example, if the first row contains <td> elements acting as headers, use tr:first-child td. The converter will query that selector against the parsed table to extract header text for data-label attributes and label span injection.

No. The converter outputs only the HTML DIV structure. Responsive behavior depends on your project's CSS. The generated data-label attributes and BEM class names are designed to work with a common responsive pattern: at narrow breakpoints, set .div-table__row to display: block and use .div-table__cell::before { content: attr(data-label); } to display inline labels. A sample CSS snippet is included in the output when labels are enabled.

The converter preserves class, id, style, and all data-* attributes from source cells. Event handler attributes (onclick, onmouseover, etc.) and <script> tags are stripped by default for security. If preserveDim is enabled, explicit width and height values from attributes or inline styles are copied to the DIV cells.

Yes. When wrapSections is TRUE (default), the converter creates wrapper DIVs: div-table__header, div-table__body, and div-table__footer corresponding to <thead>, <tbody>, and <tfoot>. If the source table has no explicit sections, all rows are treated as body rows. Multiple <tbody> elements are each wrapped separately.

The converter runs entirely in the browser's main thread using DOMParser. Tables up to approximately 5000 rows perform well on modern hardware with conversion completing in under 200ms. Beyond 10000 rows, you may experience a brief UI pause. The output HTML string for very large tables can exceed several megabytes. For production datasets of that scale, consider server-side conversion.