html:漂亮的原生表格

by Alexander Gilmanov

亚历山大·吉尔马诺夫(Alexander Gilmanov)

HTML表格：关于它们的所有知识 (HTML Tables: All there is to know about them)

Judging by the fact that we created wpDataTables, it’s no secret that we like tables. So much that we wrote this lengthy article about them to help out those of you who are beginners and want to learn about HTML tables.

从我们创建wpDataTables的事实来看，喜欢表并不是什么秘密。 如此之多，我们写了一篇关于它们的冗长文章，以帮助那些想学习HTML表的初学者。

HTML tables are used for displaying data that make sense in spreadsheet software. They consist of rows and columns and are often used on websites for the effective displaying of tabular data.

HTML表用于显示在电子表格软件中有意义的数据。 它们由行和列组成，通常在网站上用于有效显示表格数据。

So how to make a table in HTML? When to use it and why? What are good HTML table examples? Today, we are going to answer these questions and more to help you understand everything there is to know about HTML tables.

那么如何用HTML制作表格呢？ 什么时候使用它，为什么？ 什么是好HTML表示例？ 今天，我们将回答这些问题，以及更多的帮助您了解有关HTML表的知识。

目录 (Table of contents)

• Introduction to tables表格简介
• Table styling表格样式
• HTML tables frequently asked questionsHTML表格常见问题
• HTML table generator toolsHTML表生成器工具

表格简介 (Introduction to tables)

The HTML table is used for arranging data (such as text, images, links etc.) into the tabular design — basically, rows and columns.

HTML表用于将数据(例如文本，图像，链接等)排列到表格设计中-基本上是行和列。

何时使用表格 (When to Use Tables)

A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.

当您要组织在电子表格中看起来最好的数据时，HTML表格很有用。 HTML表是显示诸如财务数据，日历，价格，功能比较，营养成分信息面板，保龄球得分以及许多其他表格数据之类的好方法。

There is a chance you have heard that the tables were unsemantic. However, that is not at all true. Tables semantically indicate tabular data and they are the best choice for displaying data of this kind.

您可能已经听说过这些表格是非语义性的。 但是，那根本不是真的。 表在语义上指示表格数据，它们是显示此类数据的最佳选择。

何时不使用桌子 (When NOT to Use Tables)

While some data looks great in tables, there are things that shouldn’t be arranged that way simply because it wouldn’t make any sense. There are also some other inappropriate CSS table uses that should be avoided if possible.

尽管某些数据在表中看起来不错，但有些事情不应仅仅因为它没有任何意义就应该以这种方式进行安排。 如果可能的话，还应避免使用其他一些不合适CSS表。

For example, you should never use tables for layout. The thing is that table elements semantically describe tabular data and using them for other purposes is a breach of semantic duty.

例如， 永远不要将表用于layout 。 问题是表元素在语义上描述了表格数据，将它们用于其他目的违反了语义义务。

The general rule is that the websites should be accessible. One part of accessibility is screen readers which read tables from top to bottom, left to right. With the tables in HTML, the order of how the site is presented is determined by visual choices instead of the accessibility choices. In cases like that, screen readers don’t always work as you’d want them to.

一般规则是网站应该可访问。 可访问性的一部分是屏幕阅读器，它从上到下，从左到右读取表格。 使用HTML中的表格，网站的显示顺序由视觉选择而非可访问性选择确定。 在这种情况下，屏幕阅读器可能无法始终如您所愿地工作。

表格元素 (Table Elements)

HTML tables usually come with a short description of their purpose. Sometimes, a more detailed description is provided via the summary attribute for the benefit of people using speech or Braille-based user agents.

HTML表通常带有对其目的的简短描述。 有时，会通过summary属性提供更详细的描述，以使使用语音或基于盲文的用户代理的用户受益。

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements). User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When we print the long HTML tables, the head and foot information is usually displayed on each page containing the table.

表行可以分为头，脚和身体部分(通过THEAD ， TFOOT和TBODY元素)。 用户代理可以利用头/身体/脚的划分来支持身体部分的滚动，而与头和脚部分无关。 当我们打印较长HTML表时，通常在包含该表的每一页上显示头和脚信息。

If you want to provide more structural information, you can also group columns. In addition to that, column properties may be declared at the start of the table definition using the COLGROUP and COL elements.

如果要提供更多的结构信息，还可以对列进行分组。 除此之外，可以在表定义的开始使用COLGROUP和COL元素声明列属性。

Table cells contain the header information and/or data and they can span multiple columns and rows. When you label each cell with the HTML 4 table mode, the non-visual user agents can communicate the information to the user more easily. Not only is this useful for users with disabilities but it makes it possible for modal wireless browsers with limited display capabilities to handle HTML tables.

表格单元格包含标题信息和/或数据，它们可以跨越多个列和行。 当您使用HTML 4表格模式标记每个单元格时，非可视用户代理可以更轻松地将信息传达给用户。 这不仅对残障用户有用，而且还使得显示能力有限的模态无线浏览器可以处理HTML表。

We mentioned already that tables HTML should not be used for layout. Instead, you should use style sheets whenever necessary to achieve better results and better accessibility.

我们已经提到过，表格HTML不应用于布局。 相反，您应在必要时使用样式表，以获得更好的结果和更好的可访问性。

头和身体 (Head and Body)

Let’s take a look at a basic example of HTML table style:

让我们看一下HTML表格样式的基本示例：

Imagine looking at a row (horizontal) to see a single person and relevant information about them. When you look up and down a column (vertical), you will get a sense of the variety or pattern of data.

想象一下，横行看一个人和有关他们的相关信息。 当您向上或向下查看一列(垂直)时，您会感觉到数据的多样性或模式。

The first row is the header of the table and it contains no data — just the titles of the columns. You can semantically indicate that is the case with the <thead> element, which would wrap the first <tr> (it could wrap as many rows as needed that are all header information).

第一行是表的标题，它不包含任何数据，仅包含各列的标题。 您可以在语义上指示< ad>元素就是这种情况，该元素将包装firs t <tr>(它可以包装所需数量的行，这些行都是标头信息)。

When you use <thead>, there must be no <tr> that is a direct child of <table>. All rows must be within either the <;thead&gt;, <tbody>, or <tfoot>.

当您使用<广告 >，必须有N 2 O <TR>这是一个可怕的CT <TABLE>的柒 d。 所有行必须在 EI 疗法前作 <; THEAD＆gt;中<TBODY>或<TFOOT>。

表格页脚 (Table Footer)

Along with <thead>; and &lt;tbody>;, there is <tfoot> for wrapping table rows that indicate the footer of the table. Like <thead>, best for semantically indicating that these are not data rows but ancillary information.

与< ad>一起； 和＆lt; TBODY>;，疗法 e是<TFOOT>用于指示页脚O至吨能够包裹表行。 像<thead>一样，最适合从语义上指示这些不是数据行而是辅助信息。

The placement of <tfoot> is unique in HTML as it comes after &lt;thead> and before <tbody>! So even though it might seem logical to find it at the end of <table>, it is actually not the case. Since the footer contains information necessary to understand the table, it is placed before the data in the source order for better accessibility.

<tfo ot>的位置在HTML中是唯一的，因为它在＆ lt; thead>之后并且在 <tbody>之前！ 因此，即使在 <table>的末尾找到它似乎合乎逻辑，但实际上并非如此。 由于页脚包含理解表所必需的信息，因此将其按源顺序放在数据之前，以提供更好的可访问性。

Table footer can be used in long HTML tables to repeat the header, for example. However, it can be used for other purposes as well, for instance, with a layout where the position of elements jumps around from bottom to top depending on needs.

例如，表脚注可用于长HTML表中以重复标题。 但是，它也可以用于其他目的，例如，根据元素的位置从底部到顶部跳跃的布局。

表格元素及其属性 (Table Elements and their Attributes)

<tfoot> HTML标记 (<tfoot> HTML Tag)

The <tfoot> element identifies one or more <tr> elements as containing summary contents of a table’s columns. The <tfoot> element must be the direct descendant of a <table> element.

在<TFO OT>元素标识一个或MORË<TR>元素为包含表的c系数olumns的摘要内容。 在<TFOOT>元素必须是<table>元素的直销吨desce ndant。

In HTML5, <tfoot> can be placed either before or after &lt;tbody&gt; and <tr>elements, but must appear after any <;caption>, <colgroup>, and <thead> elements.

在HTML5中， <tfo ot>可以放在＆ lt; tb ody＆ gt;之前或之后 。 和<tr>元素，但必须在 所有< ; capti on>， <colgroup>和<thead>元素之后显示。

<tbody> HTML标记 (<tbody> HTML Tag)

The <tbody> element must be a direct descendant of a &lt;table> element and is used to identify <tr> elements that comprise the body of the table. The <tbody> element should always come after a <thead> element and may come before or after a <tfoot> element.

在<TBO DY>元素必须是一个℃的直系后代; table>元素，并且用于我包含在表的主体dentify <TR>元素。 在<TBODY>元素昭ULD ALW AYS来一个<THEAD>元件的第二可能会之前或<TFOOT>元素之后后。

<tr> HTML标记 (<tr> HTML Tag)

Attributes

属性

• <tr align=””><tr align =””>
• <tr valign=””><tr valign =””>
• <tr bgcolor=””><tr bgcolor =””>
• <tr background=””><tr background =””>
• <tr bordercolor=””><tr bordercolor =””>

The <tr> element is used to group together &lt;th> or <td> values into a single row of table heading or data values. The <tr> element may be a direct child of a <table> element or nested within a parent <thead>, <tfoot>, or <tbody> element.

所述<TR>元素用于组TOG 醚：R＆L T;第 >或<TD>值到表标题的单个行或DAT一个值。 所述<TR>元件可以是 <TABLE>的广告 I整流器子ELEM ENT或 NE STED无线薄的括号吨<THEAD>，<TFOOT>或<TBODY>元素。

<thead> HTML标记 (<thead> HTML Tag)

Attributes

属性

The <caption> element is used to add a caption to an HTML table. A <;caption> must appear in an HTML document as the first descendant of a parent <table>, but it may be positioned visually at the bottom of the table with CSS.

<capti on>元素用于将标题添加到HTML选项卡。 A <;字幕>必须出现在HTML文档中作为PA租<TABLE> 的第一后代，但也可以在视觉上与在CSS的表的底部被定位。

关口 (col)

Attributes

属性

The <col> element, typically implemented as a child element of a parent <colgroup>, can be used to target a column in an HTML table.

<c ol>元素(通常实现为ap < rent colgroup>的子元素)可用于定位HTML表中的列。

同事 (colgroup)

Attributes

属性

The <colgroup> element is used a parent container for one or more <col>elements which are used to target columns in an HTML table.

<colgro up>元素用作一个或多个 <col>元素的父容器，这些元素用于定位HTML表中的列。

基本样式 (Basic Styling)

Distinguishing different parts of the table is easy if the table has different colors and lines. CSS table border is another common element. By default, all table cells are spaced out from one another by 2px. Between the first row and the rest, you will notice a slight extra gap caused by the default border-spacing being applied to the <thead>; and &lt;tbody> pushing them apart a bit extra.

如果表格具有不同的颜色和线条，则可以轻松区分表格的不同部分。 CSS表边框是另一个常见元素。 默认情况下，所有表格单元格彼此间隔2px。 在第一行和其余行之间，您会注意到，由于将默认的边框间距应用于<the ad>导致了一些额外的间隙。 和＆ t t>将它们分开。

You can control the spacing:

您可以控制间距：

table {border-spacing: 0.5rem;}

table {border-spacing: 0.5rem;}

Or you can simply remove that space:

或者，您可以简单地删除该空间：

table {border-collapse: collapse;}

table {border-collapse: collapse;}

HTML table padding, HTML table heading, borders, and making <th> elements left-aligned is a simple yet effective way to style your HTML tables.

HTML表格填充，HTML表格标题，边框和使<th>元素左对齐是一种简单而有效的样式化HTML表格样式。

表格的重要样式规则 (Important Style Rules for Tables)

CSS tables and their properties work great if you use them right. There are, however, some details to keep in mind. For example, if you apply a certain font-family to the table, but then a different one to the cell — the cell wins because it is the actual element with the text inside.

如果正确使用CSS表及其属性，则效果很好。 但是，有一些细节需要牢记。 例如，如果将某种字体系列应用于表，但是将另一种字体应用于表，则该单元将获胜，因为它是其中包含文本的实际元素。

These properties are either unique to table elements or they behave uniquely on table elements.

这些属性对于表元素是唯一的，或者对表元素是唯一的。

垂直对齐 (vertical-align)

Possible values: baseline, sub, super, text-top, text-bottom, middle, top, bottom, %, length

可能的值 ：基线，次，超级，文本顶部，文本底部，中间，顶部，底部，％，长度

Aligns the content inside a cell. Works particularly well in tables, although only the top/bottom/middle make much sense in that context.

在单元格内对齐内容。 尽管在这种情况下，只有顶部/底部/中间才有意义，但在表中的效果特别好。

空格 (white-space)

Possible values: normal, pre, nowrap, pre-wrap, pre-line

可能的值： normal，pre，nowrap，pre-wrap，pre-line

Controls how text wraps in a cell. Some data may need to be all on one line to make sense.

控制文本在单元格中的环绕方式。 有些数据可能需要全部放在一行上才有意义。

边界崩溃 (border-collapse)

Possible values: collapse, separate

可能的值：崩溃，分开

Applied to the table to determine if borders collapse into themselves (sort of like margin collapsing only bi-directional) or not. What if two borders that collapse into each other have conflicting styles (like color)? The styles applied to these types of elements will “win”, in order of “strength”: cell, row, row group, column, column group, table.

应用于表格以确定边界是否自身折叠(有点像边距只是双向折叠)。 如果两个相互折叠的边界具有冲突的样式(例如颜色)怎么办？ 应用于这些类型元素的样式将按照“强度”的顺序“获胜”：单元格，行，行组，列，列组，表。

边界间距 (border-spacing)

Possible values: length

可能的值：长度

If border-collapse is separate, you can specify how far cells should be spaced out from each other. The modern version of the cellspacing attribute. And speaking of that, padding is the modern version of the cellpadding attribute.

如果border-collapse是分开的，则可以指定单元格之间应隔开的距离。 cellspacing属性的现代版本。 谈到这一点，填充是cellpadding属性的现代版本。

宽度 (width)

Possible values: length

可能的值：长度

Width works on table cells just about how you would think it does, except when there is some kind of conflict.

宽度在表格单元格上的作用几乎与您的想法相同，除非存在某种冲突。

For instance, if you tell the table itself to be 400px wide then the first cell of a three-cell row to be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split up the remaining space.

例如，如果您告诉表格本身为400px宽，则三单元格行的第一个单元格为100px宽，而其他单元格则不放置，则该第一个单元格将为100px宽，另外两个单元格将拆分剩余的空间。

But if you tell all three of them to be 20000px wide, the table will still be 400px and it will just give each of them a third of the space. That’s assuming white-space or elements like an image don’t come into play.

但是，如果您将所有三个像素的宽度设置为20000px，则表格仍将为400px，它将为每个像素提供三分之一的空间。 假设空白或图像之类的元素不起作用。

边境 (border)

Possible values: length

可能的值：长度

Border works on any of the table elements and just about how you would expect. The quirks come in when you collapse the borders.

Border适用于任何表格元素，以及您的期望。 当您折叠边框时，就会出现怪癖。

In this case, all table cells will have only one border width between them, rather than the two you would expect them to have (border-right on the first cell and border-left on the next cell).

在这种情况下，所有表单元格之间只有一个边框宽度，而不是您希望它们具有的两个边框宽度(第一个单元格右边框，下一个单元格左边框)。

In order to remove a border in a collapsed environment, both cells need to “agree” to remove it. Like this:

为了在折叠的环境中删除边框，两个单元都需要“同意”以删除边框。 像这样：

td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left: 0; }

Otherwise, source order/specificity wins which border is shown on which edge.

否则，源顺序/特性将赢得在哪个边上显示哪个边框。

表布局 (table-layout)

Possible values: auto, fixed

可能的值：自动，固定

auto is the default. The width of the table and its cells depends on the content inside.

auto是默认设置。 表格及其单元格的宽度取决于里面的内容。

If you change this to fixed, the table and column widths are set by the widths of table and col elements or by the width of the first row of cells.

如果将其更改为固定，则表和列的宽度由table和col元素的宽度或单元格第一行的宽度设置。

Cells in subsequent rows do not affect column widths, which can speed up rendering. If the content in subsequent cells can’t fit, the overflow property determines what happens.

后续行中的单元格不影响列宽，这可以加快渲染速度。 如果后续单元格中的内容不合适，则溢出属性将确定发生的情况。

表格边框 (Table Border)

Table border CSS makes it easier to see the table and it is also the best method for displaying borders. Add styles, within the <style></style> tags located in the head element, to show the border for the table, th and td elements within your HTML document.

表格边框CSS使查看表格更加容易，它也是显示边框的最佳方法。 在head元素中的<style> </ style>标记内添加样式，以显示HTML文档中表格，th和td元素的边框。

连接细胞 (Connecting Cells)

To understand how connected cells work, we need to explain the two attributes that can go on any table cell element: HTML rowspan and HTML colspan. If a td has a colspan of 2 (i.e. <td colspan=”2″>) will take up the space of two cells in a row horizontally even though it would still be a single cell. The same goes for rowspan, but vertically.

要了解连接的单元格如何工作，我们需要解释两个可以在任何表单元格元素上使用的属性：HTML rowspan和HTML colspan。 如果td的colspan为2(即<td colspan =” 2”>)，即使它仍然是单个单元格，它也会水平占据一行中两个单元格的空间。 行跨度相同，但垂直方向相同。

Rowspan is a bit harder to grasp simply because columns are grouped differently than rows. For example, with colspan, you get the final value by simply adding up the values for each table cell in the row. With rowspan, on the other hand, the row below it gets +1 to its table cell count and needs one less table cell to complete the row.

仅因为列的分组方式与行的分组方式不同，所以行距更难掌握。 例如，使用colspan，您只需将行中每个表格单元格的值相加即可得到最终值。 另一方面，使用rowspan时，其下一行的表单元格计数为+1，并且需要少一个表单元格才能完成该行。

嵌套表 (Nesting Tables)

“Nesting tables” simply means placing a table inside another table which is doable, but you need to include the complete structure with the <table> element. However, it might not be the best idea because of the confusing markup and worse accessibility.

“嵌套表”只是意味着将一个表放置在另一个可行的表中，但是您需要在<table>元素中包含完整的结构。 但是，由于令人困惑的标记和更差的可访问性，它可能不是最好的主意。

However, there are situations when this is absolutely necessary and yes, it is doable. So, for example, if you need to import content from other sources, you can import a table and place it inside your table.

但是，在某些情况下，这是绝对必要的，是的，这是可行的。 因此，例如，如果您需要从其他来源导入内容，则可以导入表并将其放置在表中。

斑马条纹表 (Zebra Striping Tables)

Colors are very helpful for the users to easily spot what they are looking for in the table. You can either set a background color to the table cell elements or you can set them on the table rows themselves.

颜色对用户非常有用，可以轻松地在表中发现他们想要的东西。 您可以为表格单元格元素设置背景色，也​​可以在表格行本身上设置它们。

This is the most basic example:

这是最基本的示例：

tbody tr:nth-child(odd) {background: #eee; }

tbody tr:nth-child(odd) {background: #eee; }

Using tbody is useful if you don’t want to stripe header and footer rows. If you don’t want to let what is underneath show through, you can set the even rows as well.

如果不想剥离页眉和页脚行，则使用tbody很有用。 如果您不想让下面的内容显示出来，也可以设置偶数行。

If you need to support browsers that don’t understand: nth-child() (pretty damn old) you could use jQuery to do it.

如果您需要支持不了解的浏览器：nth-​​child()(该死的很老)，则可以使用jQuery来实现。

突出显示行和列 (Highlighting Rows and Columns)

Highlighting rows is pretty easy; all it takes is adding a class name to a row.

突出显示行非常容易； 它所要做的就是在行中添加一个类名。

Highlighting columns, on the other hand, takes a bit more effort. You can use the <col> element, which will allow you to set styles for cells that appear in the selected column. For example, a table with 4 columns in each row would need to have 4 <col> elements.

另一方面，突出显示列需要花费更多的精力。 您可以使用<c ol>元素，该元素将允许您设置出现在所选列中的单元格的样式。 例如，每行有4列的表将需要具有4个 <col>元素。

如何居中HTML表格 (How to center an HTML Table)

How to center a table in HTML? This question is pretty common among people designing their first HTML tables. The thing is that text-align:center doesn’t center a table as a whole — it just centers the text inside the cells.

如何在HTML中居中放置表格？ 这个问题在设计第一个HTML表的人们中很常见。 关键是text-align：center不会将整个表格居中放置-只是将文本居中放置在单元格内。

Centering the whole table needs left and right margins set to auto, and top and bottom margins set to the values you need.

将整个表格居中需要将左右边距设置为auto ，将上下边距设置为所需的值。

Say you want the top and bottom margins of your table to be one blank line (1em). The CSS code in the <table> tag is simply:

假设您希望表格的顶部和底部边距为一个空白行(1em)。 <tab le>标记中CSS代码很简单：

<table style=”margin:1em auto;”>

<table style=”margin:1em auto ;”>

If you wish to wrap text next to a table, use float:left to float the table to the left of the subsequent text. To put a little space between the table and the text, you can also put the right margin on the table, like this:

如果要在表格旁边换行，请使用float：left将表格浮动到后续文字的左侧。 要在表格和文本之间留一点空间，还可以在表格上放置正确的边距，如下所示：

<table style=”float:left; margin-right:10px;”>

<table style=”float:left; margin-right:10px <table style=”float:left; margin-right:10px ;”>

If you want the table to be to the right of the neighboring text, use float:right instead. You can also set the left margin:

如果您希望表格在相邻文本的右边，请改用float：right 。 您还可以设置左边距：

<table style=”float:right; margin-left:10px;”>

<table style=”float:right; margin-left:10px <table style=”float:right; margin-left:10px ;”>

Something to keep in mind: Make sure you put the text that should be next to the table after the closing </table> tag for the table. Floats float next to subsequent content in the code, not content that precedes the float.

注意事项：确保在表格的</ table>结束标记后放置应在表格旁边的文本。 浮点数浮动在代码中后续内容的旁边，而不是浮点数之前的内容。

HTML表格常见问题 (HTML tables frequently asked questions)

我可以在表格中嵌套表格吗？ (Can I nest tables within tables?)

Yes, you can place an existing table inside the cell of another table. There is an example mentioned earlier in this article.

是的，您可以将现有表放置在另一个表的单元格内。 本文前面提到了一个示例。

Keep in mind that the older browsers have problems with nested tables if you don’t explicitly close your TR, TD, and TH elements. To avoid these issues, include every </tr>, </td>;, and </th> tag, even though the HTML specifications don’t require them.

请记住，如果您未明确关闭TR ， TD和TH元素，则较旧的浏览器在嵌套表方面会遇到问题。 为了避免这些问题，即使HTML规范不需要它们，也应包含每个</ tr >， </ td> ;和</ th>标记。

Also, try not to nest tables more than a few rows deep into the table because the older browser versions often have problems with that. You can use the ROWSPAN and COLSPAN attributes to minimize table nesting.

另外，请尽量不要在表格中嵌套表格多于几行，因为较旧的浏览器版本经常会出现问题。 您可以使用ROWSPAN和COLSPAN属性来最大程度地减少表嵌套。

Finally, be especially sure to validate your markup whenever you use nested tables.

最后，特别要确保每当使用嵌套表时都要验证您的标记。

如何使用表格来构造表格？ (How can I use tables to structure forms?)

Within a TD element within a table, there can be small forms placed if you want to position a form relative to the other content. However, if you want to position the form-related elements relative to each other, it doesn’t really help.

如果要相对于其他内容放置表单，则可以在表的TD元素内放置小表单。 但是，如果您想将与表单相关的元素彼此相对放置，那实际上没有帮助。

If you want to do that, the entire table must be within the form. You can’t start a form in one TH or TD element and end in another. You can’t place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.

如果要执行此操作，则整个表必须在表单内。 您不能在一个TH或TD元素中开始表格，而在另一个TH或TD元素中结束。 您不能将表格放在表中，除非将其放在TH或TD元素内。 您可以将表放入表单中，然后使用该表放置INPUT ， TEXTAREA ， SELECT和其他与表单相关的元素，如以下示例所示。

我可以对<TD WIDTH = ...>使用百分比值吗？ (Can I use percentage values for <TD WIDTH=…>?)

The HTML 3.2 and HTML 4.0 specifications allow only integer values (representing a number of pixels) for the WIDTH attribute of the TD element. The he HTML 4.0 DTD, on the other hand, allows non-integer values (such as percentages), so an HTML validator will not complain about <TD WIDTH=”xx%”>.

HTML 3.2和HTML 4.0规范仅允许TD元素的WIDTH属性使用整数值(表示像素数)。 另一方面，HTML 4.0 DTD允许使用非整数值(例如百分比)，因此HTML验证程序不会抱怨<TD WIDTH =“ xx％”>。

Keep in mind that Netscape and Microsoft’s browsers interpret percentage values for <TD WIDTH=…> differently. On the other hand, their interpretations (and those of other table-aware browsers) match when combined with <TABLE WIDTH=”100%”>. In cases like that, percentage values can be used safely, even though they are prohibited by the public specifications.

请记住，Netscape和Microsoft的浏览器以不同的方式解释<TD WIDTH = ...>的百分比值。 另一方面，当它们与<TABLE WIDTH =“ 100％”>结合使用时，它们的解释(以及其他表识别浏览器的解释)是匹配的。 在这种情况下，即使公共规范禁止使用百分比值，也可以安全使用。

为什么<TABLE WIDTH =“ 100％”>不能使用整个浏览器宽度？ (Why doesn’t <TABLE WIDTH=”100%”> use the full browser width?)

The margin between the content and the edge of the display area is quite narrow with graphical browsers. Navigator always leaves room for a scrollbar on the right. However, when the document is not long enough to require scrolling, the scrollbar doesn’t appear and this leaves you with the margin on the right that can’t be removed.

使用图形浏览器时，内容和显示区域边缘之间的边距非常窄。 导航器始终为右侧的滚动条留出空间。 但是，当文档不够长而无法滚动时，滚动条不会出现，这使您在右边距处无法删除。

为什么我的桌子前后有多余的空间？ (Why is there extra space before or after my table?)

An invalid HTML syntax can cause extra space before and after HTML tables. The most common cause is the loose content within the table (i.e., content that is not inside a TD or TH element).

无效HTML语法可能会导致HTML表之前和之后的额外空间。 最常见的原因是表中的内容松散(即，不在TD或TH元素内的内容)。

When it comes to the loose content, there isn’t a standard way to handle it. Some browsers display it before or after the table. When the loose content contains only multiple line breaks or empty paragraphs, all this empty space will be displayed before or after the table itself.

对于松散的内容，没有标准的处理方法。 一些浏览器在表格之前或之后显示它。 当松散内容仅包含多个换行符或空白段落时，所有空白空间将在表本身之前或之后显示。

The solution is to fix the HTML syntax errors. All content within a table must be within a TD or TH element.

解决方案是修复HTML语法错误。 表中的所有内容必须在TD或TH元素内。

使用表格进行布局有任何问题吗？ (Are there any problems with using tables for layout?)

The short answer would be — yes.

简短的答案是- 是的 。

In order for the browsers to display the table, the HTML table attributes, particularly the HEIGHT or WIDTH attributes need to be known. The thing is that the entire table has to be downloaded with the known dimensions before being rendered. If the above-mentioned attributes aren’t known, the rendering process can be delayed.

为了使浏览器显示表格，需要了解HTML表格属性，尤其是HEIGHT或WIDTH属性。 事实是，整个表格在呈现之前必须以已知的尺寸下载。 如果上述属性未知，则渲染过程可能会延迟。

In addition to that, if any of the table’s content is too wide for the available display area, the table has to stretch to display the oversized content. The rest of the content then adjusts to fit the oversized table rather than fitting the available display area. As a result of that, the users need to scroll horizontally to be able to read the content. The printed versions can also end up being cropped.

除此之外，如果该表的任何内容对于可用显示区域而言太宽，则该表必须伸展以显示超大内容。 然后，其余内容将进行调整以适合超大表格，而不是适合可用的显示区域。 结果，用户需要水平滚动以能够读取内容。 打印版本也可能最终被裁剪。

If the content is viewed on a display narrower than anticipated, the fixed-width tables cause the same problems as other oversized tables. If the displays are wider than anticipated, much of the display is will be wasted with the extremely wide margins. If the readers require larger fonts, the content will be displayed with only a few words per line.

如果在比预期窄的显示器上查看内容，则固定宽度表会引起与其他超大表相同的问题。 如果显示器的宽度超出预期，则许多显示器将被浪费，其边距极宽。 如果读者需要更大的字体，则每行仅显示几个单词。

One of the most important things to keep in mind is the correct syntax. The browsers don’t do well with invalid syntax. Nested tables may not display correctly with correct syntax either in older versions of Netscape Navigator.

要记住的最重要的事情之一就是正确的语法。 浏览器在使用无效语法时效果不佳。 在旧版本的Netscape Navigator中，嵌套表都可能无法以正确的语法正确显示。

Then there are also some browsers that completely ignore tables which means they would also ignore the layout created with the HTML tables. In addition to that, search engines also ignore them. What you normally see in search results is usually the text at the beginning of a document. As a result of that, if a table is used for layout, instead of the actual content, navigation links appear in the search.

还有一些浏览器完全忽略表，这意味着它们也将忽略使用HTML表创建的布局。 除此之外，搜索引擎还忽略它们。 您通常在搜索结果中看到的通常是文档开头的文本。 结果，如果使用表而不是实际内容进行布局，则导航链接将出现在搜索中。

Some versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. They associate the named anchor with the top of the table, instead of the content of the anchor. If you don’t use ALIGN attribute on your tables, this problem can be entirely avoided.

某些版本的Navigator在使用ALIGN属性的表中时，链接到命名锚时会遇到问题。 它们将命名的锚点与表的顶部关联，而不是锚点的内容。 如果您不在表上使用ALIGN属性，则可以完全避免此问题。

All that being said, if you insist on using HTML tables for layout, careful markup can help you minimize the related issues. Avoid placing wide content inside tables such as wide images, PRE elements with long lines, long URLs, and similar.

话虽如此，如果您坚持使用HTML表进行布局，那么仔细的标记可以帮助您最大程度地减少相关问题。 避免将宽内容放置在表中，例如宽图像，带长行的PRE元素，长URL等。

Use several independent tables rather than a single full-page layout. For instance, you could use a table to lay out a navigation bar at the top or the bottom of the page, and leave the main content completely outside any layout tables.

使用几个独立的表，而不是一个完整的页面布局。 例如，您可以使用表格在页面顶部或底部布置导航栏，并将主要内容完全保留在任何布局表格之外。

如何使用<caption>向表中添加标题？ (How to add a caption to your table with <caption>?)

You add a caption to your table by putting it inside a <caption> element and nesting it inside the &lt;table> element. You should put it just below the opening <table> tag.

您可以通过将标题放在<capti on>元素内并将其嵌套在＆ lt; table>元素中，来为表添加标题。 您应该将其放在操作 <table>标记的正下方。

<table> <caption>Your caption should be here</caption> ... </table>

The purpose of the caption is to contain a description of the table content. This gives the readers a quick idea of whether the table contains the content they are searching for. However, it is particularly useful for the visually-impaired users who can avoid having the screen reader read a lot of the table content before realizing what the table is about.

标题的目的是包含对表内容的描述。 这使读者可以快速了解表是否包含他们要搜索的内容。 但是，这对于视觉障碍的用户特别有用，因为他们可以避免让屏幕阅读器在意识到表格的含义之前先阅读大量表格内容。

A caption is placed directly beneath the <table> tag.

标题直接位于<tab le>标记下方。

Note: The summary attribute can also be used on the <table> element to provide a description — this is also read out by screen readers. We’d recommend using the <;caption> element instead because the summary is deprecated by the HTML5 table spec, and doesn’t appear on the page.

注意：summary属性也可以在<tab le>元素上使用以提供描述-屏幕阅读器也可以读取该属性。 我们建议您使用< ; caption>元素，因为该摘要已被HTML5表格规范弃用，并且不在页面上显示。

最好HTML表生成器工具 (Best HTML Table Generator Tools)

If you don’t want to deal with a bunch of HTML table code, using a good table generator tool could be really useful. Creating a table in HTML with a tool like this requires no knowledge of developing languages and it is pretty fast and simple.

如果您不想处理一堆HTML表代码，那么使用一个好的表生成器工具可能会非常有用。 使用这样的工具在HTML中创建表不需要开发语言，而且非常快速，简单。

In addition to that, the majority of the best tools of this sort are completely free of charge and everyone can use them. Basically, all you have to do is import the data, and customize the table (for example, HTML table border style, HTML table formatting, CSS table width, CSS table background color, cellspacing, cellpadding etc).

除此之外，大多数此类最佳工具都是完全免费的，每个人都可以使用它们。 基本上，您要做的就是导入数据并自定义表格(例如，HTML表格边框样式，HTML表格格式，CSS表格宽度，CSS表格背景色，cellspacing，cellpadding等)。

Once you are done with that, the generator will give you your table HTML code that you will simply copy and paste to your website. Easy-peasy.

完成此操作后，生成器将为您提供表格HTML代码，您只需将其复制并粘贴到您的网站即可。 十分简单。

为什么要使用HTML表生成器工具 (Why Should You Use HTML Table Generator Tools)

Designing a table from scratch is no easy task. Making it perfectly functional is an uphill battle and it takes a lot of time and effort — not to mention that the results often end up being less than perfect.

从头开始设计表格并非易事。 使其完美发挥功能是一项艰巨的任务，需要花费大量时间和精力-更不用说结果常常不尽人意。

Instead of writing lines and lines of code with your notepad, you can save yourself a lot of time and trouble with the right HTML table generator tool. Not only is it easier but the results are often better than when you try to build the whole thing yourself. Not to mention how much time it will save you, and we all know time is money.

不用使用记事本编写代码行，而是使用正确HTML表生成器工具，可以节省大量时间和麻烦。 这不仅比尝试自己构建整个项目更容易，而且结果通常更好。 更不用说节省多少时间了，我们都知道时间就是金钱。

HTML表生成器工具 (HTML table generator tools)

表格生成器 (Tables generator)

Very useful HTML table generator tool. Easy to use and it allows you to choose the theme you like best. You can learn more about it on the official website.

HTML表格生成器非常有用的工具。 易于使用，它使您可以选择最喜欢的主题。 您可以在官方网站上了解更多信息。

Quackit (Quackit)

A simple and easy-to-use tool that also happens to be free of charge.

一个简单易用的工具，也是免费的。

特鲁本 (Truben)

Truben allows you to make all kinds of HTML tables quickly and easily.

Truben允许您快速轻松地制作各种HTML表。

HTML表格 (Html-tables)

A handy tool that works similarly to word processors. It lets you create beautiful tables free of charge.

类似于文字处理器的便捷工具。 它使您可以免费创建漂亮的表。

CSS表生成器 (CSS Table generator)

Great tool for creating stylish tables without the use of images.

无需使用图像即可创建时尚表的绝佳工具。

表样式器 (Tablestyler)

Use table CSS elements and create gorgeous HTML tables with this online tool.

使用表格CSS元素并通过此在线工具创建漂亮HTML表格。

文本修复器 (Textfixer)

A simple tool for creating your favorite table style.

一个用于创建您喜欢的表格样式的简单工具。

Accessify (Accessify)

One of the simplest tools; perfect for people with little technical knowledge and/or slow internet connection.

最简单的工具之一； 非常适合那些几乎没有技术知识和/或互联网连接速度慢的人。

RapidTables (RapidTables)

This tool comes with a variety of generating options and creating great HTML tables is one of them.

该工具带有多种生成选项，创建出色HTML表就是其中之一。

制表器 (Tableizer)

A useful generator for designing HTML tables out of spreadsheet data.

一个有用的生成器，用于根据电子表格数据设计HTML表。

关于学习HTML表的最终想法 (Ending thoughts on learning about HTML Tables)

Creating beautiful and functional HTML tables is no easy task. If you want to build them from scratch, you have to have a certain amount of coding knowledge and developing experience because there are many things to consider if you want the table display the content properly.

创建漂亮且功能强大HTML表并非易事。 如果要从头开始构建它们，则必须具有一定的编码知识和开发经验，因为要使表正确显示内容，需要考虑很多事情。

If, on the other hand, you are looking for a quick solution that requires no coding experience, you could always consider using one of many handy table generator tools. Not only will they save you a lot of time and trouble, but the results will also be amazing.

另一方面，如果您正在寻找不需要编码经验的快速解决方案，则可以始终考虑使用许多方便的表生成器工具之一。 它们不仅可以为您节省大量时间和麻烦，而且效果也非常惊人。

If you enjoyed reading this article about HTML tables, you should also read these:

如果您喜欢阅读有关HTML表的本文，则还应该阅读以下内容：

• CSS tables and their code that you can use

  CSS表及其可使用的代码

• Building Responsive Tables with CSS & HTML or WordPress

  使用CSS和HTML或WordPress构建响应表

• jQuery Table Plugins You Should Check Out

  您应该签出的jQuery Table插件

Originally published at wpdatatables.com on October 31, 2018.

最初于2018年10月31日发布在wpdatatables.com 。

翻译自: https://www.freecodecamp.org/news/html-tables-all-there-is-to-know-about-them-d1245980ef96/

html:漂亮的原生表格