构建工具 Toolz.dev 示我写了很多html表格,在文档中,在给用户的电子邮件中,在偶尔的普通着陆页中。而一个表格是没有人喜欢用手写的一位html。十行五列是五十多个单元格标签,所有这些都必须按正确的顺序打开和关闭,并且缺少一个 </td> 悄悄打破了整个布局,我电子表格里有一堆数据,想要标记,所以我在站点里建了一个生成器,这是它的指南。
TL;博士: 工具 HTML 表生成器 获取逗号或选项卡分隔的数据并编写完整的、可访问的数据
<table>与<thead>、<tbody>的,以及适当的头单元格。第一行可以成为<th scope="col">和第一列<th scope="row">者(screen readers),所以屏幕阅读器会宣布正确的标头。添加标题、条纹行和边框,并选择基于类的 CSS、电子邮件的内联样式或普通语义 HTML。每个单元格都已转义。它完全运行客户端:无上传、无注册、离线工作。
HTML表格生成器是什么?
HTML 表生成器将一行数据变成 HTML 标记,将它们渲染为浏览器中的表,您粘贴逗号分隔或选项卡分隔的值,选择表的外观,工具写入完整的 <table> 元素与 <thead>、 <tbody>的,以及其中的行和单元格。而不是手工输入每个 <tr>、 <th>、和 <td> 并计算单元格以保持列对齐,您将数据粘贴一次并复制备份标记,该标记已准备好放入页面、电子邮件模板或允许原始 HTML 的 Markdown 文件中。
Generator赢得其位置的原因是表HTML冗长和重复,重复是错误隐藏的地方每个单元格都需要一个打开和一个关闭标签,头单元格与数据单元格不同,整个事情必须保持矩形或浏览器渲染一团糟。对于小表之外的任何事情,手工执行此操作是缓慢且容易出错的。该工具确定性地执行此操作:您给它值,它会产生有效的、转义的、正确嵌套的标记。
Raw markup上面有一个手写表经常跳过的辅助层,是我最在意的部分,一个正确构建的表使用 <th> 对于带有 a 的标头单元格 scope 属性,因此辅助技术可以宣布给定数据单元属于哪个标头,并且它可以携带一个 <caption> 描述表包含的内容。关于表格数据的 WHATWG HTML Living Standard's 部分详细说明了这些元素,生成器为您应用它们,而不是为您留下一个 <div> 网格看起来像一张桌子,但读取时屏幕阅读器会发出噪音。
为什么不直接手写表格呢?
2×2的表,手写比打开工具更快,你应该。生成器在实际上很痛苦的表上赚取它的保留:真实数据、许多行、一个头的那些,手写有三种反复出现的故障模式。
第一个是结构损坏。五十个中的一个关闭标签错过了,浏览器's错误恢复做了一些不可预测的事情,你失去了几分钟的搜索启动它的单元格。第二个是列不一致,如果一行有四个单元格,其余有五个,表渲染弯曲,在标签墙上发现短行确实很困难。第三个是转义:粘贴包含 a 的数据 <,一个 &的,或者是流浪 " 直接进入牢房,您要么打破了标记,要么打开了一个小注射孔。
Generator 全部去掉三个,它填充短行,所以每一行都有相同数量的单元格,表保持矩形,它总是关闭它打开的内容,并且它 HTML- 转义每个单元格值,所以 a < 变成 < and显示为文本而不是被读为标签,你粘贴的是你得到的,安全渲染。
这是一张桌子上的决定。
| 情况 | 用 | 为什么 |
|---|---|---|
| 一张两两的小桌子 | 手写它 | 比打开任何东西都快 |
| 具有许多行和一个标头的真实数据 | HTML 表生成器 | 逃生、筑巢和对齐是手桌破裂的地方 |
| 您需要一个 Markdown 表 | 标记表生成器 | 同样的想法,GitHub 味道的 Markdown 输出 |
| 您只想查看或检查 CSV | CSV 查看器 | 读取数据而不生成标记 |
如何让桌子易于访问?
这是将一个看起来很正确的表格与适用于每个人的表格分开的问题,因此它有自己的部分。两件事很重要:标题单元格和标题。
Header 单元格为先,在真实的表中,标注行或列的单元格应该是 <th>不是 <td>并且每个 <th> 应携带a scope 属性说它是否位于列的头部(scope="col")或一行(scope="row")。屏幕阅读器使用 scope 要在每个数据单元之前宣布相关的标头,因此听众会听到"角色:工程师"而不是裸"工程师"没有上下文。生成器's第一个行标头选项发出 <th scope="col"> 对于顶行,第一个列标题选项会发出 <th scope="row"> 为每个身体行的前导单元格。w3c's WAI教程关于表,对于简单的数据表,恰好推荐了这种模式。
标题是第二部分。 A <caption> element,它直接位于表内,给表一个辅助技术读出且视力正常的用户在网格上方看到的标题,它是无论如何你都会在表上方写的句子的可访问等价物,生成器在你填写标题字段时添加一个,它像其他任何文本一样逃脱它。在标题和作用域标头之间,输出是一个屏幕阅读器可以导航的表,而不是它绊倒的形状。
造型模式有什么区别?
该工具提供了三种提供造型的方法,因为表格的走向会改变工作原理。
Class 模式将类名添加到表中,并输出一个可以放入样式表中的 CSS 匹配块,这是网站的正确选择:标记保持干净,造型生活在一个地方,功能像斑马条纹一样使用 tbody tr:nth-child(even)(仅从样式表)中工作, 而是以内联模式将样式直接写入每个元素上 style attributes。that是更丑陋的标记,但它是你需要html电子邮件,其中大多数客户端剥离 <style> block 和外部 CSS,所以造型要在每一个元素上顺风车,没有一种模式输出没有类、根本没有样式的普通语义 HTML,这是你拥有自己的设计系统,只需要正确、可访问的结构挂在上面时想要的。
I reach for class mode默认情况下,只有当我粘贴到电子邮件时才是inline mode,当我将表丢弃到已经在全球范围内为其表进行样式的站点时,我没有模式工具可以让您在它们之间切换而无需重新输入数据,因此尝试所有三个查看哪一个适合是点击几下。
我如何使用生成器?
flow是四个步骤,在输入框中粘贴逗号分离或标签分离的行;自动检测分隔符,数据不明确可以覆盖,决定第一行是否为列头,每行第一列是否为行头,添加标题,打开条纹行、边框或紧凑布局,选择基于类的css、内联样式或纯html,然后点击生成并复制html,再加上类模式下匹配的css。
解析遵循 RFC 4180(CSV 的非正式标准),因此用双引号包裹的字段可以包含分隔符,并且引用字段内的双引号变成单引号。这意味着像这样的单元格 "Doe, Jane" stays one cell而不是在逗号处分裂。而且因为所有内容都在浏览器中运行,所以你可以将包含客户姓名、内部数据或其他任何你不想要的数据粘贴到服务器上,而且它永远不会离开你的客户端模型,与站点其余部分背后的模型相同,在 中描述 数据隐私在线工具 指南。
这与其他工具如何配合?
HTML 表生成器坐在一小群工具中,这些工具都采用结构化数据并进行回溯清理标记,它最近的邻居是 标记表生成器的,它做同样的工作,但输出 GitHub 风格的 README 和问题标记,而不是网页的 HTML 当您生成的表's标记想要整理,或者您有一堆手写表 HTML 来重新缩进时, HTML 格式化程序 美化它。当您在 HTML 和 Markdown 文档之间移动时, HTML 到 Markdown 转换器 处理往返,包括桌子。
连接的想法是,数据以一种形状生活,而你需要另一种形状,而确定性工具比人手动编辑标签更好地进行翻译。如果您为网络构建, web开发人员工具包 综述显示了它们如何组合在一起 开发人员生产力工具 指南涵盖了更广泛的小型实用程序,每个实用程序每天节省几分钟,很多次。
编写文档的工作示例
Let me make this concretic。site周围的很多文档都是一组特征比较和参考表:哪个工具做什么,哪个限制适用于哪里,给定选项意味着什么。大部分数据在电子表格中开始生命,因为电子表格是很容易编辑和排序的地方。将其带到一个页面上,过去意味着要么导出到Markdown,我的一些页面没有渲染,要么手工键入HTML表,对于二十行引用来说,这确实是一个痛苦的十分钟。
现在我将列直接从电子表格中复制出来,电子表格将选项卡分隔的值放在剪贴板上,粘贴到生成器中,让它自动检测选项卡分隔符。我保留第一行作为标头,添加描述表格的标题,在类模式下打开条纹行和边框,同时复制 HTML 和 CSS。标记掉入页面,CSS 进入样式表一次,之后每个表都会重复使用,整个过程不到一分钟。标头单元格显示为 <th scope="col">(table),所以表在没有我思考的情况下是可访问的,并且每个值都转义了,所以包含 a 的行 < 在代码引用中不会炸毁页面。
I使用生成器而不是手写这些表的原因不是HTML很硬,而是HTML很无聊,无聊的部分是我引入错误的地方卸载标签打字,转义和可访问性属性到工具意味着表在第一个粘贴上是正确的,我把注意力花在表的内容上而不是它的管道上,对于电子邮件,我以内联模式重新生成相同的数据,因为时事通讯工具条 <style> blocks,而内联版本则完好无损地保存了行程。
有哪些值得了解的极限?
几个诚实的边缘。首先是这个工具构建 数据 tables,那种有头和数值的行的那种。它不是布局工具,它不做 colspan 或 rowspan,你有时在复杂的表格中看到的合并单元格技巧。合并单元格使一个表格无论如何都更难让屏幕阅读器导航,而对于绝大多数表格数据,你不需要它们。如果你真的需要一个跨越几列的合并头,那就是对生成的标记进行手动编辑,并且 HTML 格式化程序 之后会保持整洁。
Di二是生成器把你的数据读成文本,不试图巧妙地Zai类型上,每一格中都发出一列数字作为文本,Zheng正适合显示;不对数字进行右对齐,不加千个分隔符,Yin为那些是属于你的造型和格式化决策,它保证的是你粘贴De值就是格中值,逃逸不变。
第三个是分隔符歧义。自动检测的工作原理是找到分隔符,该分隔符可以给出您行中最一致的列计数,并且对于干净的 CSV 和 TSV 来说是可靠的。如果您的数据确实模糊,例如某些行中包含未引用逗号的值,检测可能会猜错,这就是为什么分隔符是手动覆盖而不是固定决策。显式设置它并且解析是确定性的。
最后,类模式下生成的CSS是一个明智、中性的起点:浅标题背景、薄边框、舒适的填充。它意味着编辑。更改颜色以匹配您的品牌、调整填充、删除条纹;它是普通的 CSS,具有清晰的类名,工具'的工作是为您保存初稿,而不是口述最终外观。
常见问题
HTML表格生成器是什么? HTML 表生成器将一行数据转换为 HTML 标记,将它们呈现为表,您粘贴 CSV 或选项卡分隔的值,它会写入一个完整的值 元素与 、 的, 和单元格, 所以你不必用手键入每个标签。
如何将 CSV 转换为 HTML 表? CSV粘贴到输入框中,如果第一行包含列名,则保留为标头,选择您的样式,然后单击生成。工具检测分隔符,构建表,并给您HTML,您可以直接复制到页面中。
如何让桌子易于访问? 使用标头单元格和标题。打开第一行标头,使列标题变为 、启用行标签的第一列标头,并添加描述表格的标题,屏幕阅读器然后为每个单元格宣布正确的标头。造型模式有什么区别? Class mode 添加类名和单独的 CSS 块,这对于一个网站来说是最好的,内联模式直接在每个元素上写样式,粘贴到电子邮件中幸存下来,没有一种模式输出简单的语义 HTML,这样你就可以应用自己的样式表。
我数据中的特殊字符是否已转义? Yes。每个单元格值都是HTML转义的,因此像<、>、&和"这样的字符被写成实体,显示为文本,而不是被解释为标记。这使得当数据包含角括号或安培数时,表不会被破坏。
它可以处理单元格内的逗号吗? Yes。parser遵循RFC 4180,因此用双引号包裹的字段可以包含分隔符,而引用字段内部的双引号则变成单引号。引用的逗号保持单元格的一部分,而不是开始新列。
我的数据是否上传到任何地方？ No。转换完全发生在您的浏览器使用JavaScript在您的设备上。您的数据从未上传,记录或存储,并且一旦页面加载,该工具就一直与网络断开连接。
HTML表生成器是免费的? Yes。完全免费,没有注册,没有水印,也没有使用上限。生成任意数量的HTML表,你需要个人或商业项目。
