The table markup rules hand-written HTML gets wrong, how to make tables work on mobile, and why tables do not belong in page layout.
An HTML table generator builds table markup visually you set rows, columns, and content in an interface, and it outputs clean HTML you can paste straight into a page. Writing tables by hand means tracking dozens of opening and closing tags where a single missing </td> breaks the entire layout. Try the free HTML Table Generator → Table Markup, Briefly Even when generating tables, it helps to recognize what the output means: html <table> <thead> <tr> <th scope="col">Product</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <td>Widget</td> <td>$19</td> </tr> </tbody> </table> <table> - the container <thead> / <tbody> - header and body sections <tr> - a row <th> - a header cell (bold and centered by default, and announced as a header by screen readers) <td> - a data cell <caption> - a title for the table, placed immediately after the opening <table> tag Three Details Most Hand-Written Tables Get Wrong Using <td> where <th> belongs. A header row built from <td> cells looks fine once styled, but screen readers then have no way to tell users which column a value belongs to. Header cells must be <th> . Missing scope . Adding scope="col" or scope="row" tells assistive technology how each header relates to the cells around it. It's one attribute and it's the difference between a navigable table and an unreadable grid. Skipping <caption> . A caption gives the table a title that's announced before its contents. It's the fastest accessibility win available on any table. Together these take seconds and are the main things separating a table that works for everyone from one that only works visually. Making Tables Work on Mobile Wide tables are the classic responsive problem a six-column table has no good way to fit a phone screen. Horizontal scroll is the most reliable solution. Wrap the table and let it scroll sideways rather than squeezing columns into illegibility: css .table-wrapper { overflow-x: auto; } Stacked cards convert each row into a vertical block on narrow screens, using CSS to relabel each cell. It reads better on phones but requires more CSS and duplicated labels. Cutting columns hiding less important columns below a breakpoint is simple but hides data, so it only suits tables with clearly optional fields. For most content tables, horizontal scroll is the right default: nothing is hidden, and it takes two lines of CSS. Don't Use Tables for Page Layout Tables were used for page layout in the 1990s because CSS couldn't do it yet. That era is over CSS Grid and Flexbox handle layout properly. Layout tables cause real problems: screen readers announce them as data tables and try to read structure that doesn't exist, they resist responsive design, and the markup becomes unmaintainable. Tables are for tabular data. If the content wouldn't make sense as a spreadsheet, it isn't a table. Styling Without Overdoing It A few rules cover most cases: css table { border-collapse: collapse; width: 100%; } th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #e0e0e0; } tbody tr:hover { background: #f5f5f5; } border-collapse: collapse merges adjacent cell borders into single lines without it, every cell gets its own border and the table looks doubled up. Alternating row backgrounds ( tr:nth-child(even) ) help with wide tables but add visual noise to small ones. Right-align numeric columns. It sounds trivial, but aligned decimal points make columns of figures dramatically easier to scan. Other Table Formats Markdown tables - for documentation, READMEs, and static site generators. The Markdown Table Generator handles the pipe-and-dash alignment that's tedious to type manually. CSV to HTML - when data already exists in a spreadsheet, converting is faster than retyping it into a builder. Frequently Asked Questions How do I create an HTML table without coding? Use a visual HTML table generator : set the number of rows and columns, fill in the content, and copy the generated HTML. No markup knowledge needed. What's the difference between <th> and <td> ? <th> marks a header cell and <td> marks a data cell. Beyond the default bold, centered styling, <th> tells screen readers that the cell labels the row or column — which is what makes a table navigable for assistive technology. Should I use tables for page layout? No. Use CSS Grid or Flexbox for layout. Tables are for tabular data; using them for layout breaks accessibility and makes responsive design far harder. How do I make an HTML table responsive? The most reliable approach is wrapping the table in a container with overflow-x: auto so it scrolls horizontally on narrow screens. Alternatives include stacking rows into cards with CSS, or hiding non-essential columns at smaller breakpoints. What does border-collapse: collapse do? It merges the borders of adjacent cells into a single shared border. Without it, each cell renders its own border and the table appears to have doubled lines between cells. How do I convert a table to Markdown instead of HTML? Use a Markdown Table Generator , which produces the pipe-delimited syntax used in READMEs, documentation, and static