如何为表格设置水平表头？-html教程-PHP中文网

语法

Example 3

示例 1

Tables in HTML

Employee Details

首页

web前端

html教程

如何为表格设置水平表头？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 06:05 PM

水平表头设置

Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all

inside a single tag.

语法

以下是设置表格水平标题的语法：

<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
登录后复制

Example 1
的中文翻译为：
示例 1

Now let us see an example program to set horizontal header for a table.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; padding: 20px; } </style> </head> <body> <h2 id="Tables-in-HTML">Tables in HTML</h2> <table style="width: 100%"> <tr> <th >First Name </th> <th>Job role</th> </tr> <tr> <td ></td> <td ></td> </tr> <tr> <td ></td> <td ></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
登录后复制

On executing the above program, it will display a table with horizontal headers First Name and Job role.

Example 2

现在，在这个第二个示例中，我们尝试创建另一个具有水平标题“Name”、“Age”和“Technology”的3行示例 −

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; width: 100px; height: 50px; } </style> </head> <body> <h1 id="Employee-Details">Employee Details</h1> <table> <tr> <th>Name</th> <th>Age</th> <th>Technology</th> </tr> <tr> <td>Amit</td> <td>27</td> <td>Database</td> </tr> <tr> <td>Sachin</td> <td>34</td> <td>Marketing</td> </tr> </table> </body> </html>
登录后复制

Following is the output for the above example program.

Example 3

我们还可以为表格设置垂直标题。下面是一个示例，用于创建表格的垂直标题。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; padding: 20px; } </style> </head> <body> <table style="width: 100%"> <tr> <th>First Name </th> <td></td> <td></td> </tr> <tr> <th>Last Name</th> <td ></td> <td></td> </tr> <tr> <th>Job role</th> <td ></td> <td></td> </tr> </table> </body> </html>
登录后复制

Following is the output for the above example program.

以上是如何为表格设置水平表头？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7677

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。