分步表单如何实现 html_HTML表格入门的分步指南

分步表单如何实现 html

by Abhishek Jakhar

通过阿比舍克·贾卡(Abhishek Jakhar)

HTML表格入门的分步指南 (A step-by-step guide to getting started with HTML tables)

总览 (Overview)

The web is filled with information like football scores, cricket scores, lists of employee names and email addresses. HTML tables enable you to display information in what is commonly known as tabular data.

网络上充斥着诸如足球比分，板球比分，员工姓名列表和电子邮件地址之类的信息。 HTML表使您能够显示通常称为表格数据的信息 。

NOTE: I have already added the Styling using CSS, so my elements will look different. But they will work in exactly the same way.

注意：我已经使用CSS添加了样式，所以我的元素看起来会有所不同。 但是它们将以完全相同的方式工作。

If you want to make your elements look like mine then, you can find my CSS file in the links given below:

如果要使您的元素看起来像我的元素，则可以在下面给出的链接中找到我CSS文件：

If you want to make your elements look like mine then, you can find my CSS file in the links given below:CSS: https://gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

如果要使您的元素看起来像我的元素，则可以在下面的链接中找到我CSS文件： CSS： https : //gist.github.com/abhishekjakhar/2ea51dfc0dcf6f6ed0d44ac0e72f9c54

基本表 (Basic Table)

We can create an HTML table using the table element. It has an opening and closing tag, and it wraps all the table rows and table cells inside of it.

我们可以使用table元素创建一个HTML表。 它具有一个开始和结束标签，并且将所有表行和表单元格包装在其中。

<table></table>

Now, let’s type a table row. Tables are made up of rows of information that go across the page. A <tr> element is used to create a table row.

现在，让我们键入一个表格行。 表格由遍及页面的信息行组成。 < tr>元素用于创建表行。

However, there is no element for the table column. Table columns depend on how many table cells are inside each row. A <td> element is used to create a table cell. So basically the number of <td> elements you will add inside the <tr> element is the exact same number of columns you will get inside your table row.

但是，表列没有元素。 表列取决于每行中有多少个表单元格 。 < td>元素用于创建表格单元。 所以基本上麻木呃华氏度 <TD>元素，您将添加插件 IDE中的<tr>元素是完全相同的列数，你会得到你的表行内。

To recap:

回顾一下：

• <table>: The table element represents data in a series of rows and columns. Tables should only be used for displaying tabular data, and never for page layout.

  <table >：table元素表示一系列行和列中的数据。 表只能用于显示表格数据，而不能用于页面布局。

• <tr>: The table row element defines a row of cells in a table. Table rows can be filled with table cells and table header cells.

  <tr >：表格行元素定义表格中的单元格行。 表格行可以用表格单元格和表格标题单元格填充。

• <td>: The table cell element contains data and represents a single table cell. Each table cell should be inside a table row.

  <td >：表单元格元素包含数据并代表单个表单元格。 每个表格单元格应在表格行内。

Note: <table> elements have no attributes. If you’ve worked with tables before, you may have used some attributes in the past. However, they are all now deprecated.

注意： <table>元素没有属性。 如果您以前使用过表，则过去可能使用过一些属性。 但是，它们现在都已弃用。

表标题元素 (Table Header Element)

We’ve created a basic table, but it’s not clear that our first row in the table is actually an attempt to label each of our columns. Right now, the first row simply looks like another row in our table.

我们已经创建了一个基本表，但是尚不清楚表中的第一行实际上是对每个列进行标记的尝试。 现在，第一行看起来就像我们表中的另一行。

We can use a table header element on each of these three columns to tell the browser, search engine crawlers, and screen readers that these are actually headers and not just regular data.

我们可以在这三列中的每一个上使用一个表头元素 ，以告知浏览器，搜索引擎搜寻器和屏幕阅读器这些实际上是头，而不仅仅是常规数据。

Now we will be changing table cells in the first row to a table headers cell. To do that we will replace <td&gt; by <th>.

现在，我们将第一行中的表格单元更改为表格标题单元。 为此，我们将替换< td＆g t; b y <th>。

桌子头和身体 (Table Head & Body)

Similar to the structure of our HTML document, where we have a head and a body, we can also add a head and a body to our table. We will definitely not use the same HTML elements because then the syntax will become invalid. For the table, we have <thead> for the head and &lt;tbody&gt; for the body.

与HTML文档的结构类似，在该结构中我们有一个头和一个主体，我们也可以在表中添加一个头和一个主体。 我们绝对不会使用相同HTML元素，因为这样语法将变得无效。 对于该表中，我们有<广告 > FO 第r个 ËHEA d和＆L T; TBODY＆GT; 为身体。

• <thead> — The table head element (not to be confused with the table header cell element) defines a set of rows that make up the header of a table.

  <the ad> —表头元素(不要与表头单元格元素混淆)定义了构成表头的一组行。

• <tbody> — The table body element defines one or more rows that make up the primary contents (or “body”) of a table.

  <tbo dy> —表格主体元素定义了构成表格主要内容(或“主体”)的一行或多行。

桌脚元素 (Table Foot Element)

We have a table head and a table body element. So of course, there’s a table foot element as well. But the question is what is the point of table footer element when we already have the table headers that label columns?

我们有一个表头和一个表主体元素。 因此，当然还有桌脚元素。 但是问题是，当我们已经有了标签列的表头时，表脚元素的意义是什么？

In general, a table footer element should contain a summary of the table. This might be some final cells containing sums, totals and averages for each column. It might also contain some meta information like copyright information or the source of data within a table.

通常，表页脚元素应包含表的摘要。 这可能是一些最终单元格，其中包含每列的总和，总计和平均值。 它也可能包含一些元信息，例如版权信息或表中的数据源。

Now, you would think that the table footer would go at the bottom of the table. However, it actually should go right after the table head element and just before the table body element.

现在，您会认为表格页脚将位于表格底部。 然而，它实际上应该在表头元素之后 ， 只是 表体元素之前去。

• <tfoot&gt; — The table footer element defines a set of rows summarizing the columns of the table.

  <tfoot > —表脚元素定义了一组汇总表各列的行。

字幕元素 (Caption Element)

This element is basically a title for the table, and it should come immediately after the opening table tag. This is nice to add because it quickly summarizes what a table might contain.

这个元素基本上是表格的标题，应该在开始表格标签之后。 添加它很不错，因为它可以快速汇总表可能包含的内容。

Now we have covered the essentials of table elements in HTML.

现在，我们已经介绍了HTML中表格元素的要点。

You can learn more about the tables in the links given below.

您可以在下面的链接中了解有关表格的更多信息。

HTML Table BasicsThat just about wraps up the basics of HTML Tables.developer.mozilla.orgHTML Table Advanced There are a few other things you could learn about HTML Tables.developer.mozilla.org

HTML表基础知识 几乎总结了HTML表的基础知识。 developer.mozilla.org HTML Table Advanced 您还可以了解HTML Tables的其他一些知识。 developer.mozilla.org

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

希望您发现这篇文章对您有帮助。 我希望听到您的反馈！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/a-step-by-step-guide-to-getting-started-with-html-tables-7f43b18f962b/

分步表单如何实现 html