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> 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 <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!

感謝您的閱讀！