Configure your table visually — rows, columns, headers, borders, and styles. Get clean, ready-to-use HTML table code instantly. Edit cells directly in the preview.
An HTML table is built from four core elements: <table> (the container), <thead> (the header group), <tbody> (the body rows), and <tr> (table rows). Inside each row, <th> creates header cells (bold, centered by default) and <td> creates data cells. This generator creates properly structured HTML table code following these semantic conventions, then lets you copy it directly into your page. Paste the result into our free html editor online to preview it in context with your full page.
border:1px solid #d1d5db and border-collapse:collapse to prevent double borders between adjacent cells.:nth-child(even), improving readability for data-heavy tables.:hover rule that highlights the row the user's cursor is on, helping with row tracking on wide tables.width:100% so the table expands to fill its container. Remove this for tables with a natural content-determined width.HTML tables are for tabular data — information that has a logical relationship between rows and columns, such as pricing plans, schedules, specifications, or comparison grids. Tables should never be used for page layout (use CSS Flexbox or Grid instead). Screen readers announce the row and column headers from <th> elements, making properly marked-up tables fully accessible to users with visual impairments. Use our HTML validator to check that your table code is correctly structured.
Wrap the table in a <div style="overflow-x:auto;"> container. This allows the table to scroll horizontally on small screens rather than overflow the page. On mobile, wide tables with many columns are often better presented as stacked card layouts using CSS — the table element itself is not ideal for narrow screens, so consider a CSS-only approach that hides columns below a certain breakpoint.
<th> (table header) semantically marks a cell as a header for a column or row. By default, browsers render it bold and centered. More importantly, screen readers associate <th> cells with the data cells in their column or row, providing context for visually impaired users. <td> (table data) is a regular data cell. Always use <th> for header cells — not just styled <td> elements.
Use the colspan attribute to span a cell across multiple columns: <td colspan="2"> merges the cell with the next column. Use rowspan to span multiple rows: <td rowspan="3">. When using colspan or rowspan, remove the cells that the merged cell covers — the total column count per row must remain consistent, counting merged cells by their span value.