Html 简明教程

HTML - Tables

HTML 表格允许我们以有条理的方式呈现数据，提供行和列功能。还提供了一个有助于清晰性和理解的视觉结构，使其成为 Web 开发中的一个基本元素。

HTML Tables allow us to present data in a organized way by providing row and column facility. Also offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.

Why Tables are Used in HTML?

表格被包含在 HTML 中，原因有很多，主要集中在有效组织和呈现数据。一些主要用途包括：

Tables are included in HTML for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include

Structuring Data: Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.
Comparative Presentation: When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.
Tabular Data Representation: Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables.

How to create a Table in HTML?

在 HTML 中创建表格涉及定义结构和内容的几个元素。使用的主要标记是 <table>, <tr>, <td>, and <th> 。

Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>, <tr>, <td>, and <th>.

HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within it.
HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.
HTML <td> Tag: Represents "table data" and is used to create standard cells within a row.
HTML <th> Tag: Represents "table header" and is used to create header cells within a row.

All about HTML Tables

HTML 表格入门 - 从“如何定义表格”到“创建嵌套表格”。表格对于简短的文本内容、数字和非数字数据非常有用。表格最常用的应用是数据库。

Geeting started with HTML tables - from "how we can define a table" to "Creating Nested Tables". Tables are very useful for brief textual content, numeric and non-numeric data. Most useful application of a table is database.

尝试单击图标运行按钮来运行以下 HTML 代码以查看输出。

Try to click the icon run button to run the following HTML code to see the output.

Define an HTML Table

使用 * <table>* 标签定义 HTML 表格，使用 * <tr>* 标签创建行，使用 * <th>* 和 * <td>* 创建表格标题和表格数据单元格。

An HTML table is defined using <table> tag, to create row <tr> tag, <th> & <td> are used to create table header and table data cell.

Example:

考虑一个表格，其中包含包含各自类别和价格的产品的简单列表。此基本表格结构以明确的表格格式组织数据，使其易于阅读和理解。此处，边框是 <table> 标签的属性，用于在所有单元格周围放置边框。如果您不需要边框，则可以使用 border="0"。

Consider a table representing a simple list of products with their respective categories and prices. This basic table structure organizes data in a clear, tabular format, making it easy to read and understand. Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0".

<!DOCTYPE html>
<html>
<body>
    <table border="1">
    <tr>
       <th>Product</th>
       <th>Category</th>
       <th>Price</th>
    </tr>
    <tr>
       <td>Laptop</td>
       <td>Electronics</td>
       <td>$800</td>
    </tr>
    <tr>
       <td>Bookshelf</td>
       <td>Furniture</td>
       <td>$150</td>
    </tr>
    <tr>
       <td>Coffee Maker</td>
       <td>Appliances</td>
       <td>$50</td>
    </tr>
    </table>
</body>
</html>

Styling HTML Table

要添加应用 css，我们将使用内部 css 方法和一些基本的 CSS 属性来装饰 HTML 表格。

To add apply css we will use the internal css approach and a few basic CSS properties to decorate the HTML table.

Example:

以下是一个示例，展示了基本 HTML 表格，该表格将使用 CSS 设计以使其看起来不错。

Here’s an example illustrating the basic HTML table which will be designed with CSS to make it look good.

<!DOCTYPE html>
<html>
<head>
   <style>
   table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
   }
   th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
   }
   th {
      background-color: #f2f2f2;
   }
   </style>
</head>
<body>
    <h2>HTML Table</h2>
    <p>This table is 3*3 cells including table header.
    <table>
        <tr>
           <th>Header 1</th>
           <th>Header 2</th>
           <th>Header 3</th>
        </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
        <tr>
           <td>Data 4</td>
           <td>Data 5</td>
           <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

Table Background Color & Image

我们可以使用 CSS 设置背景颜色或图像，也可以使用 HTML 属性设置相同的属性；在此示例中，我们将使用 HTML 属性。

We can use CSS to set the background color or image or we can use the HTML attributes for the same, here in both the example we will use the HTML attribute.

HTML bgcolor Attribute: We can set background color for whole table or just for one cell.
HTML background Attribute: We can set background image by using the HTML background attribute.

您还可以使用 bordercolor 属性设置边框颜色。

You can also set border color also using bordercolor attribute.

Example 1:

以下是如何使用 bgcolor 和 bordercolor 属性为表格背景和表格边框着色的另一个示例。

Here is an another example of using bgcolor & bordercolor attribute to color the table background and border of the table.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</td>
          <td>Row 1 Cell 2</td>
          <td>Row 1 Cell 3</td>
       </tr>
       <tr>
          <td>Row 2 Cell 2</td>
          <td>Row 2 Cell 3</td>
       </tr>
       <tr>
          <td colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

Example 2:

以下是如何使用 background 属性的另一个示例。我们在此处将使用“图像”目录中提供的图像。

Here is an another example of using background attribute. Here we will use an image available in our "images" directory.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Image</title>
</head>
<body>
    <table border="1" bordercolor="green" background="/images/test.png">
    <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
    </tr>
    <tr>
       <td rowspan="2">Row 1 Cell 1</td>
       <td>Row 1 Cell 2</td>
       <td>Row 1 Cell 3</td>
    </tr>
    <tr>
       <td>Row 2 Cell 2</td>
       <td>Row 2 Cell 3</td>
    </tr>
    <tr>
       <td colspan="3">Row 3 Cell 1</td>
    </tr>
    </table>
</body>
</html>

Table Width and Height

您可以通过使用 HTML 宽度和高度属性指定宽度和高度来设置表格大小。您可以指定表格的宽度或高度，单位为像素或占可用屏幕区域的百分比。

You can set a table size by mentioning width and height using HTML width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example:

在此示例中，我们将使用 HTML * width* 和 * height* 属性将表格宽高设置为 400 和 150。

In this example we will set the table with and height 400 and 150 by using HTML width and height attribute.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="400" height="150">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

Nested HTML Table

创建 HTML 嵌套表非常容易，我们只需要在 HTML 表中创建表即可。

Creating a nested HTML table is quite easy, we just need to create table inside of HTML table.

Example:

在此示例中，我们将创建带有边框 1 的嵌套表格。

In this example we will create nested table with border of 1.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nested Tables</title>
</head>

<body>
    <table border=1>
        <tr>
            <td> First Column of Outer Table </td>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
            <td> First Column of Outer Table </td>

        </tr>
    </table>
</body>

</html>