About the Table to HTML Converter
Writing a table by hand is four lines of markup for every line of data, and the tags outnumber the content by the time you finish. This converter takes the rows however they arrive and produces the markup, correctly nested and indented, ready to paste into a page or a template.
The separator is worked out from the data unless you name one. Detection looks at the first dozen non empty lines and prefers the character that appears a consistent number of times on every one of them, which is what distinguishes a real column separator from a comma that happens to sit inside a sentence. Markdown pipe tables are recognised as a special case: the leading and trailing pipes are trimmed and the dashed separator row underneath the header is discarded rather than becoming a row of hyphens.
Quoted fields follow the CSV convention, so a value wrapped in double quotes may contain the separator and a doubled quote inside it collapses to one. Rows shorter than the widest row are padded with empty cells so every row has the same number of columns, which is what keeps a browser from drawing a ragged table. The first row becomes <th> cells inside a <thead> by default, and the remainder sit in a <tbody>. Both can be switched off for a bare grid. Add a class name and every cell inherits your stylesheet rules. For a styled table with its own CSS block, try Tableizer, and CSV to HTML covers the same ground for strictly comma separated files.
How to use
- Paste your rows. Copying a range straight out of a spreadsheet gives tab separated text, which works as it is.
- Leave Separator on Detect, or name one when the data is ambiguous.
- Untick First row is a header if the data starts immediately.
- Type a Table class so your existing stylesheet picks the table up.
Common questions
- Does it read Markdown tables?
- Yes. Rows wrapped in pipes are detected automatically and the dashed alignment row below the header is removed.
- What happens to a value containing the separator?
- Wrap it in double quotes, as CSV does, and it stays in one cell. A doubled quote inside becomes a single quote character.
- Why do I get a single column table?
- No separator was found on every line. Choose one explicitly, or check that the rows really are delimited rather than aligned with spaces.
- Is the HTML escaped?
- Yes. Angle brackets and ampersands in your data are converted to entities, so a cell containing markup displays as text rather than rendering.