HTML表格生成器是什么?
HTML 表生成器将成行的数据转换为 HTML 标记,使它们在浏览器中呈现为表。您粘贴逗号分离或选项卡分离的值,选择表的外观,工具编写一个完整的 <table> 元素,其中包含 <thead>、<tbody>、表行和单元格。您不是手动键入每个 <tr>、<th> 和 <td> 和计数单元格以保持列对齐,而是粘贴一次数据并复制准备掉入网页、电子邮件模板或文档文件的备份标记。
HTML 手写表是重复的,容易出错而存在,一个十行五列的表需要五十多个单元格标签,全部正确打开和关闭,单个缺失的</td>破坏了布局,辅助功能增加了更多的细节:头单元格应该是<th>,带有作用域属性,所以屏幕阅读器宣布它们,而一个表通常需要一个<caption>描述其内容,这个生成器为您应用那些规则,第一行可以成为正确的头,每行的第一列可以成为行头,每个单元格值都是HTML转义的,因此像<和&这样的字符显示为文本而不是破坏页面。
Convolution 运行客户端,你粘贴的数据在你自己的设备上用 JavaScript 进行解析和转换,所以这些行永远不会上传;按生成日志只携带样式模式的使用记录,一旦页面加载,工具就会一直与断开连接的网络进行处理,你可以选择样式交付的方式:具有匹配 CSS 块的现代类名、在粘贴到电子邮件中幸存下来的独立内联样式,或者完全没有样式的普通语义 HTML。条纹行、边框、紧凑布局和缩进的选项,让你将输出与你粘贴到的项目进行匹配。
HTML生成表的工作示例,这里粘贴三行,`计划,价格,座位`,`免费,$0,1`和`Pro, "$1,200",10`,键入Pricing作为标题,然后按生成输出是一个<table>,带有<caption>Pricing</caption>,三个<th scope="col">标头和两个正文行,引用的"$1,200"保留一个单元格,而不是在其逗号处分裂,用作HTML电子邮件的表生成器,将样式切换为内联样式,每个单元格都带有自己的填充和边框,因此不需要样式表。
HTML表格生成器使用方法?
粘贴您的数据
Paste逗号分离或tab分离的行到输入框中,分隔符自动检测,或者数据不明确可以手动设置。
选择标题选项
决定第一行是否是列标题以及每行的第一列是否是行标题,因此屏幕阅读器会宣布正确的单元格。
为桌子设计样式
添加标题、打开条纹行或边框、选择紧凑的布局以及选择基于类的 CSS、内联样式或纯语义 HTML。
生成并复制
击生成来构建表,然后将 HTML 以及在 CSS 类模式下,匹配的 CSS 复制到您的项目中。您的行保留在您的设备上。
主要特点
CSV 和 TSV 输入
Paste逗号、tab、分号或分管的数据,分隔符自动检测,并正确解析嵌入分隔符的引用字段。
可访问的标头单元
1行可以变成<第scope="col">,第1列<第scope="row">,所以辅助技术会为每个数据单元格宣布标头。
三种造型模式
Emit类名与匹配的CSS块,电子邮件的独立内联样式,或没有样式的普通语义HTML,取决于表落地的位置。
条纹行、边框和标题
添加斑马条纹、单元格边框、紧凑的布局和 <caption> 元素,所有这些都一致地应用于表的每一行。
Frequently Asked Questions
Related Tools
HTML Formatter
Format, beautify, and minify HTML online. Re-indents messy or minified markup, keeps script, style, and pre content verbatim, and runs entirely in your browser.
HTML to Markdown
Convert HTML to clean Markdown instantly. Turns headings, lists, links, images, blockquotes, code blocks and tables into portable GitHub Flavored Markdown. Tolerant of messy CMS markup. Runs client-side.
Markdown Table Generator
Build Markdown tables in a spreadsheet-style editor - import CSV, Excel, or an existing table, set alignment, copy clean GFM
Markdown TOC Generator
Generate a linked table of contents from Markdown headings
Comments
0 comments
No comments yet. Be the first to share your thoughts!