html：漂亮的原⽣表格_HTML表格：关于它们的所有知识html：漂亮的原⽣表格
by Alexander Gilmanov
亚历⼭⼤·吉尔马诺夫(Alexander Gilmanov)
HTML表格：关于它们的所有知识 (HTML Tables: All there is to know about them)
Judging by the fact that we created , 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.
从我们创建的事实来看，喜欢表并不是什么秘密。 如此之多，我们写了⼀篇关于它们的冗长⽂章，以帮助那些想学习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 questions
HTML表格常见问题
HTML table generator tools
HTML表⽣成器⼯具
表格简介 (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>, <tbody>, or <tfoot>.
当您使⽤<⼴告 >，必须有N 2 O <TR>这是⼀个可怕的CT <TABLE>的柒 d。 所有⾏必须在 EI 疗法前作 <; THEAD＆gt；中<TBODY>或
<TFOOT>。
表格页脚 (Table Footer)
Along with <thead>; and <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 <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 <tbody> and <tr>elements, but must appear after any <;caption>, <colgroup>, and <thead> elements.
html网页设计 table
在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 <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 <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 2p
x. 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 <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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。