HTML表格

2023-11-19

实例

表格

表格和边框属性

可以使用 HTML 创建表格。

实例

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

（可以在本页底端找到更多实例。）

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器可能会这样显示：

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

一个完整的实例

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>

<body>

<h4>这个表格没有边框：(没有定义边框参数)</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格也没有边框：(边框参数宽度为0)</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>

<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

<h4>表格内也可以使用标签:</h4>
<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

<h4>没有 cellpadding：</h4>
<p>cellpadding:单元格边距（单元格内容与其边框之间的空白）</p>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>带有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>没有 cellspacing：</h4>
<p>cellspacing:单元格间距（单元格之间的距离）</p>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景颜色：</h4>
<table border="1"
bgcolor="pink">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>背景图像：</h4>
<table border="1"
background="./src/img/eg_background.jpg">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格背景：</h4>
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td background="./src/img/eg_cute.gif">Row</td>
</tr>
<tr>
  <td background="./src/img/eg_background.jpg">Second</td>
  <td bgcolor="grey">Row</td>
</tr>
</table>

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="hsides(horizontal sides)":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="vsides(vertical sides)":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

本例涉及到的资源

eg_background.jpg

eg_cute.gif

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTML入门进阶与实战

html

前端

javascript

html5

HTML表格的相关文章

Firebug 说“此页面上没有 Javascript”，即使页面上确实存在 JavaScript

为什么Firebug说有No Javascript on this page当页面上明显有 JavaScript 负载时我什至多次重新加载页面以确保但它仍然显示相同的消息它以前从来没有这样做过但突然间它就行为不当了是因为某些配置问题
为什么告诉 jQuery 单击我的链接按钮会减慢我的页面速度？

不知道是不是更新面板的影响 https stackoverflow com questions 31359065 performance deteriorating after async postback scrolling become
解析 Angular2 中的 xml 以在视图中呈现

我是否需要解析 xml 以从 xml 获取数据以在 html 中呈现我目前正在使用获取本地 xml 文件http get请求并在控制台日志中显示 xml 文件中的所有信息我认为它只是在读取它问题是如何在angular2中将xml转换为
使用 javascript 获取选择标签的名称

我在任何地方都没有找到这个问题所以我将其发布在这里我有一堆选择标签部分使用 VBScript 命名我希望能够获取从 javascript 中的 onchange 事件调用的选择标签的名称这是代码
我在 firebase.auth.ApplicationVerifier 中遇到问题

错误发生在signInWithPhoneNumber 的第二个参数中我无法解决这个问题我使用了三种方法来发送 otp 验证 otp 和最后用于验证码 methods sendOTP e e preventDefault if this
如何在 vue 组件的树视图中激活子类别？

我有两个 vue 组件我的第一个组件父组件如下所示
转义双引号 JavaScript

我试图在 iPhone 上查看时运行某种图像格式在其他情况下运行一些 Flash 视频 var uagent navigator userAgent toLowerCase if uagent search iphone gt 1 doc
表单验证后 isValid 保持 false

我有一个自定义验证函数但即使它没有返回错误表单仍然无效我将以下属性传递给 Formik validate import files gt return import files values length 0 import files
是否可以告诉 jsdoc 在与源代码分开的文件中查找该代码的文档？

我希望内联注释尽可能短因为我的经验是超过 3 或 4 行的注释往往会被掩盖从而产生很多不必要的阅读手册行遗留系统要求我遵守与 jsdoc 兼容的格式来记录代码如果要正确记录许多不言而喻的事情则需要明确声明它们实际上每个标签都可
如何为 HTML 验证提供自定义验证错误消息？

当我使用默认 HTML 验证时它会显示默认错误消息这不是我想向客户显示的我需要自定义消息并为每个验证提供不同的信息例如最小最大类型和要求例如该字段为必填项值不匹配参考传统的HTML代码
Cloudflare Worker 缓存 API 出现问题

我现在花了无数的时间尝试让缓存 API 来缓存一个简单的请求我让它在中间工作过一次但忘记向缓存键添加一些内容现在它不再工作了不用说 cache put 没有指定请求是否实际被缓存的返回值并不完全有帮助我只能进行反复试验有人可以给
如何在 jQuery 中使用其中心作为参考点来缩小 div？

我有以下 div div style margin left 0px height 100px width 100px background color red div 我想使用 jQueryanimate 将 div 缩小到其大小的一半
如果我想让我的网站跨平台兼容和屏幕阅读器兼容，我应该避免使用 javascript 、 jquery 、 flash 、 ajax 、 silverlight 吗？

如果我想让我的网站跨平台兼容 PC iPHONE 其他手机 PDA 和 Accessible 兼容屏幕阅读器我是否应该避免使用 JavaScript jQuery flash Ajax Silverlight 我应该只使用 xhtml c
jsx转js后dom未定义错误

我创建了一个 jsx 文件如下所示 jsx dom function use strict define jquery react react dom function React ReactDOM var AppView React c
根据用户投票移动 div

我是新来的但我喜欢这个网站我检查了其他类似的问题但没有看到我要找的东西我是一名音乐家有一段时间我一直在做每日之歌每天写一首小歌我想将歌曲发布为 div 在里面 li 在 div 中我只想要一个简单的 mp3 播放器和一个
有没有办法在不托管网站的情况下呈现网站并共享它？

我正在为一个项目创建一个 repl it 网站问题是我的老师要求不要发布该网站这意味着我无法使用 repl it 来托管它我想知道是否有任何方法可以制作可以通过 Google Chrome 查看的网站副本而无需连接到主机我有所有的
哪个 SVG/SMIL DOM 元素具有“beginElement”方法？

最终这是针对将在 Firefox 中运行的 Kiosk 风格的应用程序使用 jQuery 1 6 4 因此答案可能是特定于 Firefox 的我正在尝试制作动画 SVG 但我正在尝试通过动态插入 SMIL 来为其设置动画我没有看到任
如何以编程方式移动 OpenLayers Vector？

API 文档为OpenLayers Feature Vector http dev openlayers org apidocs files OpenLayers Feature Vector js html说 Vector 本身根本没有方
如何在禁用按钮上启用 Bootstrap 工具提示？

我需要在禁用的按钮上显示工具提示并在启用的按钮上删除它目前它的工作原理是相反的扭转这种行为的最佳方法是什么 rel tooltip tooltip
Firebug 分析问题：“没有要分析的活动”

我想用一些 javascript jQuery 尝试一些不同的选项看看哪个是最快的但是我无法让分析正常工作这是我要测试的代码 this keypress function e console profile test retrieve

随机推荐

爬虫从入门到放弃——开源爬虫框架

本文参考自知乎供本人学习使用作者老夏链接 https www zhihu com question 27042168 answer 70821088 目前主流的网络爬虫框架包括但不限于 Nutch Crawler4j WebMagi
java yaml配置处理，yaml格式化，yaml节点增加，删除。多yaml合并

多环境配置文件管理增加一个配置属性多套环境配置文件需同时增加如果忘记了那么就报错对多环境配置文件进行管理使用yaml作为文件时就涉及到yaml的一些解析修改新增操作 java管理yaml 1 环境依赖 2 snakeyam
C++基础3：仿函数

系列文章目录 C 基础开篇 C 基础1 从const关键字看变量的基础单元类 C 基础2 构造函数拷贝构造赋值运算符重载文章目录系列文章目录前言一什么是仿函数二实现步骤 1 定义类 2 重载运算符 3 使用仿函数 4
pytorch 2.0初探：和pytorch 1.13的速度对比

看到pytorch2 0出来了而且宣传提速明显一行代码即可提速43 左右 compiled model torch compile model We then measure speedups and validate accuracy
tex 表格中内容左对齐/居中/右对齐

左对齐是l 右对齐是r 居中是c begin table centering caption label tab widgets Notation summary begin tabular l l 就是这里控制每一列的对齐方式 Notat
史上最简单的SpringCloud教程

在微服务架构中需要几个基础的服务治理组件包括服务注册与发现服务消费负载均衡断路器智能路由配置管理等由这几个基础组件相互协作共同组建了一个简单的微服务系统一个简答的微服务系统如下图注意 A服务和B服务是可以相互调用的作
异常数据检测

文章目录效果一览文章概述部分源码参考资料效果一览文章概述信号分解算法 Matlab基于一维小波分解算法 Wavelet Decomposition 的信号分解算法部分源码
标准代码书写准则，避免屎山代码风格指南

牛马程序员强推屎山代码风格指南 github 开源地址 https github com trekhleb state of the art shitcode tree master 这是一个你的项目应该遵循的标准代码书写准则的列表把
centos7安装python3.x(多种方式)

但行好事莫问前程有任何疑问请留言作者有问必答哦前言 centos系统本身默认安装有python2 x 版本x根据不同版本系统有所不同可通过 python V 或 python version 查看系统自带的python版本有一些
java POI在excel中插入等比例缩放的图片

这个缩放的比例不是很准确但还凑合能用目前本人找不到其它方法就先用这个先看一个关键的API方法 void org apache poi ss usermodel Picture resize double scaleX double
DES加解密算法

DES加解密算法单密钥对称加解密算法入口参数有三个 key data mode key为加密解密使用的密钥 data为加密解密的数据 mode为其工作模式当模式为加密模式时明文按照64位进行分组形成明文组 key用于对数据加密当
githubActions部署文件到服务器

示例 githubAction配置示例 ssh秘钥方式首先在服务器生成秘钥参考https github com easingthemes ssh deploy 安装 rsync apt get install rsync 参考参考 n
Go 流程控制 for、for range 循环

在Go语言中 for循环是一种常用的流程控制语句可以重复执行一段代码块直到满足退出条件同时 Go语言还提供了for range循环用于遍历数组切片映射和字符串等数据结构在本篇博客中我们将介绍Go语言中的for循环和for r
USART HMI智能串口屏介绍

概要 USART HMI智能串口屏该显示屏的介绍 GUI界面的设计通讯方式和修改控件参数的相关指令等一开始我们项目组在显示上用的是12864液晶显示屏带字库但是看起来效果不是很好感觉很LOW 而且不知道什么原因 12864常常会
Redis主从复制总结整理

Redis的主从复制策略是通过其持久化的rdb文件来实现的其过程是先dump出rdb文件将rdb文件全量传输给slave 然后再将dump后的操作实时同步到slave中让从服务器 slave server 成为主服务器 master
实现文件里字符替换功能

思路首先要打开你要打开的文件例如我这边桌面的demo txt 利用相关函数计算出这个文件大小然后开始遍历里面的内容一个字符一个字符的遍历如果找到了要被替换的字符就当场重新把新的内容赋值进去最后重新覆盖整个文章可能表达有误可直接
mysql 5.6 安装流程

一首先解压安装包到指定路径解压路径不可为中文二配置环境变量我是windows11 1 1 2 3 4 5 6 6 全部点击确定三更改my ini 这两条路径更改为与环境变量相同路径四运行cmd 1 2 输入mysqld i
2021-08-06软考网工的一个简单的综合实验

拓扑 PC1和PC2都设置成dhcp获取ip PC1属于10网段标记为教学区 PC2属于20网段标记为宿舍区 LSW1作为接入交换机 LSW2作为核心交换机 AR1作为外网入口 AR2表示电信运营商的路由器 AR3表示联通运营商的路由器
oracle tcp空包请求,再谈 TCP 的 CLOSE_WAIT

背景某日集群告警 hbase regionserver 因 fd 不足导致进程主动退出简单排查后发现regionserver 到 datanode 的TCP 连接存在大量 CLOSE WAIT 单机总数有10万之多众所周知 CLOSE
HTML表格

目录实例表格表格和边框属性表格的表头表格中的空单元格更多实例表格标签一个完整的实例本例涉及到的资源 eg background jpg eg cute gif 可以使用 HTML 创建表格实例表格这个例子演示如何在

HTML表格

实例

表格

表格和边框属性

表格的表头

表格中的空单元格

更多实例

表格标签

一个完整的实例

本例涉及到的资源

eg_background.jpg

eg_cute.gif

HTML表格 的相关文章

随机推荐

热门标签

HTML表格的相关文章