Tabellen in HTML und Markdown erstellen
Lernen Sie Tabellen in HTML und Markdown zu erstellen.
Basic HTML tables: the structure
An HTML table uses nested tags: <table>, <thead>, <tbody>, <tr>, <th>, <td>.
Generate tables visually with the NexTools table generator.
Markdown tables: quick syntax
Markdown uses pipes and dashes: | Name | Age | / |------|-----|. Alignment: :---| left, :---:| center, ---:| right.
Limitations: No colspan, rowspan, colors, or nested rows. For complex tables, use HTML inside Markdown.
See our Markdown guide.
How to use the NexTools table generator
The NexTools generator: define rows/columns, enter data in visual editor (spreadsheet-like), choose HTML or Markdown output, copy code.
CSS styles for professional tables
Basic: border-collapse, padding, hover highlight.
Zebra striping: tr:nth-child(even) background.
Rounded: border-collapse: separate + border-radius + overflow: hidden.
For shadows, use the NexTools box-shadow generator.
Responsive tables: working on mobile
1. Horizontal scroll: Wrapper div with overflow-x: auto.
2. Mobile cards: Convert rows to stacked cards below 768px.
3. Hide columns: Media queries to hide less important columns.
4. Libraries: TanStack Table, AG Grid handle responsiveness automatically.
Calculate proportional widths with the NexTools percentage calculator.
Accessibility in HTML tables
1. Always use thead and th. Screen readers need these.
2. scope attribute on th (col/row).
3. caption element describes the table.
4. Never use tables for layout — use CSS Grid/Flexbox.
HTML tables vs CSS Grid vs Flexbox
Table: For tabular DATA. Semantic and accessible.
CSS Grid: For page LAYOUT (card grids, dashboards).
Flexbox: For one-dimension alignment (navbars, button rows).
Common error: Using divs + CSS Grid to create something that looks like a table. Screen readers don't recognize it. If data is tabular, use table.
Tables in modern frameworks
React (TanStack Table v8): Most used. Sorting, filtering, pagination, virtualization. Headless.
Tailwind CSS: table-auto, border-collapse, divide-y classes.
shadcn/ui: Pre-styled Table component.
AG Grid: Enterprise, millions of rows, Excel export.
Validate JSON data before rendering with the NexTools JSON validator.
Probieren Sie dieses Tool:
Tool öffnen→Häufig gestellte Fragen
What's the difference between HTML and Markdown tables
HTML supports everything: colspan, rowspan, CSS styles. Markdown only supports simple tables. For complex tables in Markdown, embed HTML directly.
Are HTML tables accessible for screen readers
Yes, if properly marked up: use thead, th with scope, and caption. Without these, screen readers can't navigate the table.
How do I make a responsive table on mobile
Wrap in div with overflow-x: auto. Or use CSS to convert rows to cards on small screens. Libraries like TanStack Table handle this automatically.
Can I merge cells in Markdown tables
No. Standard Markdown doesn't support colspan/rowspan. Use HTML directly within Markdown for merged cells.
What table library should I use in React
TanStack Table v8. Headless, supports sorting, filtering, pagination, virtualization. For simple tables, native JSX + Tailwind suffices.
Should I use HTML tables for page layout
No. Tables are for tabular data only. Use CSS Grid or Flexbox for layout. Table layout breaks accessibility and is obsolete since 2010+.