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

矫情吗；* 2022-11-28 15:23 339阅读 0赞

html 表格自定义

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

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项目”中][Setting Up Your HTML Project]查看有关设置`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的教程的[这一步][this step] 。)

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`添加到表中，如下所示：

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.

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

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

html 表格自定义

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[Setting Up Your HTML Project]: https://www.digitalocean.com/community/tutorials/setting-up-your-html-project
[this step]: https://www.digitalocean.com/community/tutorials/html-elements#loading-an-html-file-in-your-browser
[later on in this tutorial series]: https://www.digitalocean.com/community/tutorials/creating-the-middle-section-of-your-homepage-with-html
[https_www.digitalocean.com_community_tutorials_how-to-create-and-customize-tables-in-html]: https://www.digitalocean.com/community/tutorials/how-to-create-and-customize-tables-in-html