html 表格自定义_如何在HTML中创建和自定义表格

html 表格自定义

HTML tables are useful for arranging content in rows and columns. This tutorial will teach you how to add a table to your webpage and how customize it by adding a desired amount of rows and columns.

HTML 表对于按行和列排列内容很有用。 本教程将教您如何在网页中添加表格以及如何通过添加所需的行数和列数来自定义表格。

A <table> element requires the use of one or more table row <tr> elements, which create table rows, and one or more table data <td> elements, which insert content into table columns. Each of these elements require an opening and closing tag. The table data <td> elements go inside the table row <tr> elements, and the table row <tr> elements go inside the <table> elements. For example, here is a table that has two rows and three columns:

<table>元素需要使用一个或多个创建行的表行<tr>元素，以及一个或多个将内容插入表列的表数据<td>元素。 这些元素中的每一个都需要一个开始和结束标签。 表数据<td>元素位于表行<tr>元素内部，而表行<tr>元素位于<table>元素内部。 例如，这是一个具有两行三列的表：

<table>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
</table>

Clear your index.html file and paste the code snippet above into the document. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.)

清除index.html文件，然后将上面的代码片段粘贴到文档中。 (如果您还没有遵循该教程系列，则可以在我们的教程“ 设置HTML项目”中查看有关设置index.html文件的说明。)

Save and reload the file in the browser to check your results. (For instructions on loading the file in your browser, please visit this step of our tutorial on HTML Elements.)

保存并重新加载文件到浏览器中，以检查结果。 (有关在浏览器中加载文件的说明，请访问我们关于HTML Elements的教程的这一步 。)

Your webpage should now have a table with three columns and two rows:

您的网页现在应该有一个包含三列两行的表格：

To add an additional row, add another <tr> element like so:

要添加其他行，请添加另一个<tr>元素，如下所示：

<table>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
</tr>
</table>

Save your results and check them in your browser. You should receive something like this:

保存结果，然后在浏览器中检查结果。 您应该会收到以下信息：

To add another column, try adding another table data <td> element inside each of the table row <tr> elements like so:

要添加另一列，请尝试在每个表行<tr>元素内添加另一个表数据<td>元素，如下所示：

<table>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
<td> Column 4 </td>
</tr>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
<td> Column 4 </td>
</tr>
<tr>
<td> Column 1 </td>
<td> Column 2 </td>
<td> Column 3 </td>
<td> Column 4 </td>
</tr>
</table>

Save your results and check them in your browser. You should receive something like this:

保存结果，然后在浏览器中检查结果。 您应该会收到以下信息：

Tables can be styled by adding attributes to the <table> element. For example, you can add a border to the table with the border attribute like so:

可以通过将属性添加到<table>元素来设置<table>样式。 例如，您可以使用border属性将border添加到表中，如下所示：

<table border=”1”>
<tr>
<td> Row 1 </td>
<td> Row 2 </td>
<td> Row 3 </td>
</tr>
<tr>
<td> Row 1 </td>
<td> Row 2 </td>
<td> Row 3 </td>
</tr>
</table>

Try adding the border attribute to your table and checking your results in the browser. (You can clear your index.html file and paste in the HTML code snippet above.) Save your file and load it in the browser. You should receive something like this:

尝试将border属性添加到表中，然后在浏览器中检查结果。 (您可以清除index.html文件并粘贴到上面HTML代码段中。)保存文件并将其加载到浏览器中。 您应该会收到以下信息：

You should now understand how to add tables to your webpage and how to customize the amount of rows and columns a table contains. Tables can also be used to arrange content on your web page. There are also many other attributes you can use to style your table. We’ll return to tables as a layout tool and explore their styling possibilities later on in this tutorial series when we begin building our website.

现在，您应该了解如何向您的网页添加表格，以及如何自定义表格包含的行数和列数。 表格也可以用于排列网页上的内容。 您还可以使用许多其他属性来设置表格样式。 我们将在本教程系列的后面部分开始构建网站时，将表格作为布局工具返回表中，并探讨它们的样式设置可能性。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-create-and-customize-tables-in-html

html 表格自定义