4.HTML入门篇——表格

Exploring the unknow

于 2025-07-05 16:41:34 发布

阅读量542

点赞数 13

CC 4.0 BY-SA版权

文章标签： html 前端 javascript 表格文本标签

本文链接：https://blog.csdn.net/wym1997805/article/details/149137541

一、表格简介

HTML表格最初由Tim Berners-Lee在1993年提出，作为结构化数据展示的基础工具。早期HTML版本（如HTML 2.0）仅支持基础行列结构，功能较为简单。1997年发布的HTML 3.2规范正式将表格纳入标准，引入<table>、<tr>、<td>等核心标签。新增属性如colspan，rolspan，允许单元格跨列或跨行合并，提升了布局灵活性。下图，是表格具体应用（Oracle官网）

二、表格结构

(1)基本结构

HTML 表格由<table>标签定义，用于展示行列结构的数据。表格由行<tr>、表头单元格（<th>）和数据单元格<td>组成。其中：

<table>定义表格的容器。

<tr>定义表格的行。

<td>定义标准数据单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table>
        <!-- 表行 -->
    
        <tr>
            <!-- 单元格 -->
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
</body>
</html>

运行代码之后我们是看不到表格边框，因为table在默认情况下是没有边框，如果想要呈现边框的样式，需要用到css相关知识，在此便不再详述

(2)表格标题

以下是一张excel的数据表，其中标绿的部分便是这张表格的表头，那么html中我们需要用到<caption></caption>标签对即可实现

一个表格只能有一个标题，默认情况下标题都是位于表格内第一行

(3)表头单元格

表头单元格和表行单元格都属于表格的单元格，两者区别便是表头单元格在浏览器上会以‘粗体”，”居中“形式展现，而td不会

三、实践分析

以Oracle官网表格为例

1.首先，先分析该表格的构造。将windows作为表格的标题，表格一共有四行三列，其中表头分别是Product/file description，File size，Download

2.分析完之后，便开始编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oracle官网</title>
    <style type="text/css">
        table,td,th,tr{
            border:0.7px solid silver;
        }
    </style>
</head>
<body>
    <table>
        <!-- 表格标题 -->
        <caption>windows</caption>
        <!-- 表行，四行三列，-->
         <!-- 表头 -->
        <tr>
            <th>Product/file description</th>
            <th>File size</th>
            <th>Download</th>

        </tr>
        <tr>
            <!-- 第一行内容-->
            <td>x64 Compressed Archive</td>
            <td>229.51 MB</td>
            <td>	
https://download.oracle.com/java/24/latest/jdk-24_windows-x64_bin.zip (sha256)</td>
        </tr>
         <tr>
            <!-- 第二行内容 -->
            <td>x64 Installer</td>
            <td>205.85 MB</td>
            <td>https://download.oracle.com/java/24/latest/jdk-24_windows-x64_bin.exe (sha256)</td>
        </tr>
         <tr>
            <!-- 第三行内容-->
            <td>x64 MSI Installer</td>
            <td>204.60 MB</td>
            <td>	
https://download.oracle.com/java/24/latest/jdk-24_windows-x64_bin.msi (sha256)</td>
        </tr>
    </table>
</body>
</html>

3.结果展示