什么是HTML表格

今天你吸猫了么
403 阅读4分钟

What Are HTML Tables

HTML中的表格是显示具有表格性质的信息的一个很好的工具。这包括像体育比赛成绩、发票数据、股票价格等等。互联网上的许多网站继续使用HTML表格，因为它们在以一种视觉上令人愉悦的方式组织数据方面非常有效。虽然表格数据也可以用div元素和创造性的CSS样式很好地显示出来，但当你需要快速呈现表格数据时，好的老式HTML表格可以使事情简单而有效。在本教程中，我们将学习如何使用HTML

元素来向用户展示二维表格中的信息。

HTML标签 --------------

创建HTML表格的第一步是创建一个开头和结尾的

声明，像这样。

<table>
 
</table>
元素将包含新的HTML标签来显示数据。
元素创建表格的行 ------------

表格是由数据行组成的。为了创建一个行，你可以使用

元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
</head>
<body>
<table>
    <tr></tr>
    <tr></tr>
</table>
</body>
</html>

用

和 ---------------

就像HTML文档本身有一个头部区域和一个主体区域一样，HTML表格也可以使用<thead>和<tbody>进行同样类型的布局。这些标签对于使HTML标记更具语义性是很有用的。表格的标题应该放在

区域，而要显示的数据内容将被放在表格的区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>Pepper To Plant</th>
        <th>Quantity Needed</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Yummy</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Lemon Dream</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Red Bell</td>
        <td>15</td>
    </tbody>
</table>
</body>
</html>

用css替换表格border=1

由于

添加数据

我们不直接在行本身放置原始数据。要添加数据，必须用

标签来包装它。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
</head>
<body>
<table>
    <tr></tr>
    <tr>
        <td>Yummy</td>
        <td>10</td>
    </tr>
</table>
</body>
</html>

html table two td elements

我们可以看到数据，但要直观地看到哪些单元格包含哪些数据并不容易。让我们通过<table border="1″>添加一个边框。注意，这是一个废弃的属性，但它可能会在一段时间内继续工作。它也是学习和可视化HTML表格布局的好帮手。

html table border attribute

用

添加表格标题

为了给行和列添加标题，你可以使用表格标题元素：

。表标题元素的使用就像元素一样，只是有一个相关的标题。就像表格数据一样，表格标题必须放在表格行中。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
</head>
<body>
<table border="1">
    <tr>
        <th scope="col">Pepper To Plant</th>
        <th scope="col">Quantity Needed</th>
    </tr>
    <tr>
        <td>Yummy</td>
        <td>10</td>
    </tr>
</table>
</body>
</html>

html th element

scope属性可以取两个值中的一个。

  1. row- 这个值表明标题是为某一行准备的。
  2. col- 这个值表明标题是为某一列准备的。

colspan 和 rowspan

colspan和rowspan属性在

和元素上都可以使用。它们提供了与Excel等电子表格程序中合并单元格相同的功能。下面的标记显示了几个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
</head>
<body>
<table border="1">
    <tr>
        <th>Pepper To Plant</th>
        <th>Quantity Needed</th>
    </tr>
    <tr>
        <td rowspan="2">Yummy</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Lemon Dream</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2">Red Bell</td>
        <td>15</td>
</table>
</body>
</html>

html table colspan rowspan

标签的border属性，让我们看看如何用CSS来获得同样的效果。这个简单技巧的CSS如图所示。

table, th, td {
    border: 1px solid black;
}

表的页脚

长表的底部部分也可以用

元素来分割开来。页脚经常被用来包含总和、差异和其他数据结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Tables</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>Pepper To Plant</th>
        <th>Quantity Needed</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Yummy</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Lemon Dream</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Red Bell</td>
        <td>15</td>
    </tbody>
    <tfoot>
    <tr>
        <td>Total</td>
        <td>30</td>
    </tfoot>
</table>
</body>
</html>

简单的表格样式设计

CSS样式设计对你的HTML表格有很大的帮助。这一小部分的CSS将给我们带来一个整洁的表格。

table, td {
    border: 2px solid green;
    font-family: Arial, sans-serif;
    text-align: center;
}

th {
    background-color: green;
    color: white;
}

html table css styling

什么是HTML表格 摘要

  • 一个表格的主体是由
元素创建的。
  • 表格可以分为三个主要部分：头部、主体和页脚。
  • 表的头部是用
    • 元素创建的。
  • 一个表的页脚是用
    • 元素创建的。
    • 元素在表格中添加行。
  • 你在本课程中学到的所有CSS属性都可以应用于表格和它们的数据。
    • 元素创建一个表格。
  • 表的标题阐明了数据的含义。标题是用
    • 元素添加的。
  • 要在行中添加数据，你可以使用
    		• 元素。
  • 表格数据可以使用rowspan属性跨越行。
  • 表的数据可以用colspan属性来跨越列。
    • avatar
    文章
    阅读
    粉丝