首页 > 文章 > web前端 > 在 HTML 中创建表格

在 HTML 中创建表格

王林原创: 2024-09-04 16:37:511155浏览

HTML 表格有许多行和列，我们可以在其中插入、排列和显示数据。然后，该数据以表格格式显示在网页上。这些表格帮助我们以有序的方式呈现数据，例如显示项目列表、显示销售报告等表格数据、为网页部分创建布局等。

在本文中，我们将学习如何创建以下类型的 HTML 表格：

简单表格
带有边框和填充的表格
带有样式的表格
带标题的表格
带有嵌套表格的表格
具有列跨度和行跨度的表格
带有 colgroup 的表

在 HTML 中创建表格的要点

文本编辑器或 HTML 编辑器： 打开文本编辑器或 HTML 编辑器（例如 Notepad++、Sublime Text 或 Visual Studio Code）来编写并保存 HTML 代码。我们使用 Notepad++ 作为默认编辑器，但您可以使用任何您喜欢的编辑器。
HTML 文件： 在 Notepad++ 中创建一个新文件。我们将其命名为“table.html”或您喜欢的任何其他名称，但请记住文件名以“.html”结尾。您将在该文件中编写网页代码。如果您需要帮助创建此文件，您可以查看我们的教程“用 HTML 设计网页”。
HTML 代码： 我们在本文中提供了用于创建不同类型表格的所有基本代码。只需将代码复制并粘贴到您的“table.html”文件中即可。
网络浏览器：在“table.html”文件中编写完 HTML 代码后，您需要查看并测试您的网页。您可以使用 Google Chrome、Mozilla Firefox 或 Microsoft Edge 等网络浏览器。我们使用 Google Chrome 查看本文中所有示例的网页，但您可以选择您喜欢的任何浏览器。

HTML 中使用的标签

在 HTML 中创建表格之前，了解用于创建和构建表格的标签非常重要。以下是用于创建 HTML 表格的关键标签：

表>

Examples of Tables in HTML

Example 1: Simple Table

Let’s create a basic HTML table that showcases product information. We will include two columns labeled “Product” and “Price.” The table will contain a single row displaying data for the product “Apple” with a price of $20.

To create a simple HTML table:

Open an HTML file in a text or HTML editor.
Add the

Tag

Description

Defines a table and its content.

Defines a title or caption for a table.

Groups the header content in a table.

Groups the body content in a table.

Groups the footer content in a table.

Defines a table row.

Defines a table header cell.

Defines a table data/cell.

Specifies a set of one or more columns in a table for the purpose of formatting.

Defines the attributes for a group of columns in a table.

标签

描述

定义表格及其内容。

定义表格的标题或说明。

将表头内容分组到表格中。

将正文内容分组到表格中。

将页脚内容分组到表格中。

定义表格行。

定义表格标题单元格。

定义表格数据/单元格。

出于格式化目的指定表格中的一组或多列。

定义表中一组列的属性。

element to define the table.

Use the

element to create table rows.

The

tag. For instance, you can use style=”background-color: #33cccc;” to set the background color to a nice shade of teal.

Code:

<table>
<tr>
<th style="background-color: #33cccc;">Country</th>
<th style="background-color: #33cccc;">Population</th>
<th style="background-color: #33cccc;">Capital</th>
</tr>
<tr>
<td>Spain</td>
<td>47 Million</td>
<td>Madrid</td>
</tr>
<tr>
<td>Finland</td>
<td>5.5 Million</td>
<td>Helsinki</td>
</tr>
</table>

Output:
在 HTML 中创建表格

Example 4: Table with Caption

Using an HTML table with a caption is a great way to present information on a webpage in a tidy and organized manner. It’s like giving your table a title or a brief description to help people grasp its content easily. To include a caption, all you have to do is use the

element defines table headers (column labels).

Use the

element to create table cells (data).

Insert the desired data within the table cells.

Save the file with the .html extension, and then open it in a web browser to view the table.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
</tr>
</table>
</body>
</html>

Output:
The resultant table for product and price will be displayed as seen below:
在 HTML 中创建表格

To add an additional column to the table in the example, you can use the

element within your table’s column. This element is used to define header cells for the column.

And if you want to add a new row to the table, you can use the

element. This element is used to define regular cells within the table row.

Code:

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$10</td>
<td>15</td>
</tr>
</table>

Output:
在 HTML 中创建表格

Let’s see how to add borders to an HTML table. This is a way to visually separate the different sections of the table and make it easier to read and understand.

Example 2: Table with Borders and Padding

In this example, we will add a table element and set the border and cellpadding attribute. We will use the border attribute and set the width of the table’s border to 1 pixel. For the cellpadding attribute, we will use 5 pixels of padding for the content inside each cell.

Code:

<table border="1" cellpadding="5">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Michael</td>
<td>27</td>
<td>Alaska</td>
</tr>
<tr>
<td>Evelyn</td>
<td>32</td>
<td>Ohio</td>
</tr>
</table>

Output:
在 HTML 中创建表格

Example 3: Table with Styling

If you want to improve the appearance of your table, you can use CSS (Cascading Style Sheets) to add various styles and formatting.

One way to enhance the table is by giving different cells a background color. To do this, you can simply add the style attribute with the background-color property inside the opening

tag and place it right below the tag.

Code:

<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
caption {
background-color: #33cccc;
padding: 8px;
font-weight: bold;
}
</style>
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>Margot Mitchell</td>
<td>Manager</td>
<td>$60,000</td>
</tr>
<tr>
<td>Ryan Arnett</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</table>

Output:
在 HTML 中创建表格

Example 5: Table with Nested Tables

In HTML, when we talk about a nested table, it means we have a table placed inside another table. So, basically, some cells in the outer table contain a whole new table structure within them. If you want to include a nested table, you just need to insert another table inside any cell of your main table. To understand better, here is an example:

Code:

<table border="1">
<tr>
<th style="background-color: #33cccc;">Device</th>
<th style="background-color: #33cccc;">Brand</th>
<th style="background-color: #33cccc;">Specifications</th>
</tr>
<tr>
<td>Smartphone</td>
<td>Apple</td>
<td>
<table border="1">
<tr>
<th style="background-color: #fddb5d;">Model</th>
<th style="background-color: #fddb5d;">Storage</th>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>256GB</td>
</tr>
<tr>
<td>iPhone SE</td>
<td>128GB</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>15.6" Display</td>
</tr>
<tr>
<td>Tablet</td>
<td>Samsung</td>
<td>10.5" Display</td>
</tr>
</table>

Output:
在 HTML 中创建表格

Example 6: Table with Col Span and Row Span

In HTML, the “colspan” and “rowspan” give you the power to merge or split cells horizontally (colspan) and vertically (rowspan) to create more advanced table structures.

If you want to merge cells horizontally, simply use “colspan” followed by the number of cells you want to merge. And if you want to merge cells vertically, you can use “rowspan” along with the number of cells you want to merge.

To use the colspan and rowspan attributes, you can add them directly within the

element to group columns in an HTML table. We can also use the tag within the tag to set a background color for specific columns. To implement this, you can simply add a right after the opening

elements that you want to merge.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.football {
background-color: #33cccc;
}
.tennis {
background-color: #33cccc;
}
.lebron {
background-color: #fddb5d;
}
.heading {
background-color: #808080; /* Grey */
color: #fff; /* White */
}
</style>
</head>
<body>
<table>
<tr>
<th class="heading">Sport</th>
<th colspan="2" class="heading">Player</th>
</tr>
<tr>
<td rowspan="2" class="football">Football</td>
<td>Lionel Messi</td>
<td>Cristiano Ronaldo</td>
</tr>
<tr>
<td>Neymar</td>
<td>Harry Kane</td>
</tr>
<tr>
<td class="tennis" rowspan="2">Tennis</td>
<td>Novak Djokovic</td>
<td>Rafael Nadal</td>
</tr>
<tr>
<td>Serena Williams</td>
<td>Naomi Osaka</td>
</tr>
<tr>
<td>Basketball</td>
<td colspan="2" class="lebron">LeBron James</td>
</tr>
</table>
</body>
</html>

Output:
在 HTML 中创建表格

Example 7: Table with Colgroup

In HTML, we use the

tag.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: #a9a9a9;">
<col style="background-color: #fddb5d;">
<col style="background-color: #33cccc;">
</colgroup>
<tr>
<th>City</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>New York</td>
<td>United States</td>
<td>North America</td>
</tr>
<tr>
<td>London</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>Asia</td>
</tr>
</table>
</body>
</html>

Output:
在 HTML 中创建表格

以上是在 HTML 中创建表格的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML5 Semantic Elements下一篇：HTML Server-Sent Events

查看更多