html 简单表格制作（看了它足以应对大部分表格）

news2024/11/20 18:47:38

 

     

目录

     

基础表格

进阶表格

锦上添花表格

bgcolor  background

align

frame元素

基础表格

首先制作一个表格我们要知道一张简单表格就是由二部分组成分别是表头，表身。

下面就是一个简单的表格。

表头就是黑体加粗的内容，表身就是表格主要表达的内容。

每个表格由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格数据由 td 标签开始。如下图

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>17</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>18</td>
    </tr>
  </table>

</body>
</html>

th就是我们的表头它会自动加粗加大居中。

tr就是我们的行。

td就是我们的列。

border就是我们的边框

进阶表格

那么有的人就会说我看到的表格不是长这个样子的，是这个样的

里面没有单元格空隙，而且相对复杂。

其实我们只需要加入以下标签：cellpadding,cellspacing,colspan和rowspan即可

cellpadding是规定单元边沿与其内容之间的空白。
cellspacing是规定单元格之间的空白。
colspan 属性规定单元格可横跨的列数。                                                                                 rowspan 属性规定单元格可横跨的行数。（colspan与rowspan默认为1）

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	<h1>工商银行电子汇款单</h1>
</head>
<body>
  <table border="1" width="100%" height="100%" cellspacing="0"
  cellpadding="0">
  	<tr>
  		<th colspan="2">回单类型</th>
  		<th>网上转账汇款</th>
  		<th colspan="2">指令序号</th>
  		<th>656515466</th>
  	</tr>
  	<tr>
  		<td rowspan="4" align="left">收<br>款<br>人</td>
  		<td>卡户</td>
  		<td>张三</td>
  		<td rowspan="4">付<br>款<br>人</td>
  		<td>户名</td>
  		<td>老6</td>
  	</tr>
  	<tr>
     	<td>卡号</td>
  	  <td>005161155</td>
  	  <td>卡号</td>
     	<td>65455</td>
  	</tr>
  	<tr>
  		<td>地区</td>
  		<td>南京</td>
  		<td>地区</td>
  		<td>杭州</td>
  	</tr>
  	<tr>
  		<td>网点</td>
  		<td>工商江苏南京业务处理中心</td>
  		<td>网点</td>
  		<td>江苏徐州业务中心</td>
  	</tr>
  	<tr>
  		<td colspan="2">币种</td>
  		<td>人民币</td>
  		<td colspan="2">钞标准</td>
  		<td>钞票</td>
  	</tr>
  	<tr>
  		<td colspan="2">金额</td>
  		<td>1.00元</th>
  		<td colspan="2">手续费</td>
  		<td>0.75元</td>
  	</tr>
  	<tr>
  	  <td colspan="2">合计</td>
  		<td colspan="4">人民币（大写）：壹</td>
  	</tr>
  	<tr>
  		<td colspan="2">交易时间</td>
  		<td>2021年</td>
  		<td colspan="2">时间戳</td>
  		<td>2021-06-04-13.00.00.0000</td>
  	</tr>
  </table>
	<p>票据打印时间：2021-06-04</p>
	<p><del>票据打印单位：xx银行</del></p>
    <p>操作员：默默
</body>
</html>

锦上添花表格

 

 

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
	
</head>
<body>

  <table border="1" width="100%" height="100%" cellspacing="0"
  cellpadding="0">
  <caption>工商银行电子汇款单</caption>
  	<tr>
  		<th colspan="2">回单类型</th>
  		<th>网上转账汇款</th>
  		<th colspan="2">指令序号</th>
  		<th>656515466</th>
  	</tr>
  	<tr>
  		<td rowspan="4" align="left">收<br>款<br>人</td>
  		<td>卡户</td>
  		<td>张三</td>
  		<td rowspan="4">付<br>款<br>人</td>
  		<td>户名</td>
  		<td>老6</td>
  	</tr>
  	<tr>
     	<td>卡号</td>
  	  <td>005161155</td>
  	  <td>卡号</td>
     	<td>65455</td>
  	</tr>
  	<tr>
  		<td>地区</td>
  		<td>南京</td>
  		<td>地区</td>
  		<td>杭州</td>
  	</tr>
  	<tr>
  		<td>网点</td>
  		<td>工商江苏南京业务处理中心</td>
  		<td>网点</td>
  		<td>江苏徐州业务中心</td>
  	</tr>
  	<tr>
  		<td colspan="2">币种</td>
  		<td>人民币</td>
  		<td colspan="2">钞标准</td>
  		<td>钞票</td>
  	</tr>
  	<tr>
  		<td colspan="2">金额</td>
  		<td>1.00元</th>
  		<td colspan="2">手续费</td>
  		<td>0.75元</td>
  	</tr>
  	<tr>
  	  <td colspan="2">合计</td>
  		<td colspan="4">人民币（大写）：壹</td>
  	</tr>
  	<tr>
  		<td colspan="2">交易时间</td>
  		<td>2021年</td>
  		<td colspan="2">时间戳</td>
  		<td>2021-06-04-13.00.00.0000</td>
  	</tr>
  </table>
	<p>票据打印时间：2021-06-04</p>
	<p><del>票据打印单位：xx银行</del></p>
    <p>操作员：默默
</body>
</html>

bgcolor  background

<html>

<body>

<h4>单元背景：</h4>  
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="../tupian/哆啦A梦.jpg">
  Second</td>
  <td>Row</td>
</tr>
</table>


</body>
</html>

 

align

<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>

 

frame元素

<html>
<body>
<p> frame="box" 全边框</p>
<table frame="box">
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>哦</td>
    <td>哦</td>
  </tr>
</table>

<p> frame="above" 只有上边框</p>
<table frame="above">
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame="below" 只有下边框</p>
<table frame="below">
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame="hsides" 只有上下边框</p>
<table frame="hsides">
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

<p>frame="vsides" 只有左右边框</p>
<table frame="vsides">
  <tr>
    <th>啊</th>
    <th>啊</th>
  </tr>
  <tr>
    <td>啊</td>
    <td>啊</td>
  </tr>
</table>

</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/408833.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

css里面设置按钮（button）让字体居中

css里面设置按钮（button）让字体居中

题目&#xff1a;设置button中的字体让其居中&#xff0c;不至于溢出(字体下落&#xff0c;重影等问题) 1&#xff0c;抛出问题&#xff0c;如图所示 2&#xff0c;引出我的代码 <view class"loginBtn"><form action"check.jsp" method"get…
阅读更多...
带你吃透Servlet技术（二）

带你吃透Servlet技术（二）

个人主页&#xff1a; 几分醉意的CSDN博客_传送门 前言&#xff1a;在上一篇&#xff0c;我们已经初步的了解了 Servlet技术 传送门&#xff0c;接下来我们继续深入学习Servlet。 本文目录&#x1f496;继承HttpServlet实现Servlet程序✨代码实战✨自动生成doGet和doPost方法✨…
阅读更多...
猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用

猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用

目录 前言 一、安装&#xff08;所有内容&#xff09; 二、按需引入 三、案例演示 1.案前整理 2.代码演示&#xff08;后附源码&#xff09; 3.源码 前言 Element-ui&#xff0c;一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库&#xff0c;提供了配套设计…
阅读更多...
el-upload上传文件

el-upload上传文件

el-upload上传文件 前言 公司和学校项目都用到了上传文件的功能&#xff0c;记录一下。 准备 express实现的上传接口 const express require(express); ​ // 文件上传模块 const multiparty require(multiparty) ​ // 提供跨域资源请求 const cors require(cors) ​ …
阅读更多...
Idea中使用Tomcat部署并启动Web项目

Idea中使用Tomcat部署并启动Web项目

首先在Idea中选择编辑运行配置&#xff0c;如下图 左上角的“”号&#xff0c;选择Tomcat服务&#xff0c;如下图 自定义服务名称和项目在浏览器的访问路径 配置Tomcat服务器路径&#xff0c;如下图 然后在服务器中部署项目&#xff08;下面的警告提示&#xff1a;Warning: No …
阅读更多...
nginx响应码301及访问路径参数丢失之间的关系

nginx响应码301及访问路径参数丢失之间的关系

nginx响应码301及访问路径参数丢失之间的关系 本文比较长&#xff0c;所以写了一篇比较短的结果导向的文章&#xff0c;换了一下思路&#xff0c;大家可以看一这篇文章&#xff0c;如果感兴趣再来看这篇文章&#xff1a;nginx导致vue设置history模式下的请求丢失参数 背景描述…
阅读更多...
Java使用WebStocket实现前后端互发消息

Java使用WebStocket实现前后端互发消息

记录一下自己使用WebStocket实现服务器主动发消息的过程和踩得雷。 需求&#xff1a;车牌识别系统识别到车牌后&#xff0c;持续向前端推送车牌信息&#xff0c;直到前端回复收到。 测试需求&#xff1a;新增 客户后&#xff0c;持续向前端推送客户信息&#xff0c;直到前端收…
阅读更多...
type=“module“ 你了解，但 type=“importmap“ 你知道吗

type=“module“ 你了解，但 type=“importmap“ 你知道吗

新出了一个系列&#xff1a;Vue2与Vue3 技巧小册 有梦想&#xff0c;有干货&#xff0c;微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 当E…
阅读更多...
css的rotate3d实现炫酷的圆环转动动画

css的rotate3d实现炫酷的圆环转动动画

1.实现效果 2.实现原理 2.1 rotate3d rotate3d&#xff1a;rotate3d() CSS 函数定义一个变换&#xff0c;它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正&#xff0c;运动将为顺时针&#xff0c;如果为负&#xff0c;则为逆时针。 语法&#xff1a; …
阅读更多...
【面试题】redux及中间件相关面试题解析

【面试题】redux及中间件相关面试题解析

1、什么是Redux&#xff1f; Redux就是一个js容器&#xff0c;用于全局的状态管理 2、为什么在React项目中要使用Redux&#xff1f; 因为React本质上就是一个UI库&#xff0c;它是单向数据流的&#xff0c;就是说数据只能从父组件通过props流向子组件&#xff0c;但如果子组…
阅读更多...
Vue 无感刷新token

Vue 无感刷新token

关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已经过期 刷新token的一些方案…
阅读更多...
零基础JavaScript学习【第六期】

零基础JavaScript学习【第六期】

博主有话说：这个礼拜有些忙，离上一次更新已经过了亿天，这几天较忙所以更新会有点慢，谢谢大家的支持。(っ•̀ω•́)っ✎⁾⁾ 我爱学习 个人空间：GUIDM的个人空间 专栏内容：零基础JavaScript学习 基础还是关键。 欢迎大家的一键三连。 前情回顾：第一期https://blog.cs…
阅读更多...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程

uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程

前言 关于 uni-app 项目中接入微信支付的文章鱼龙混杂，各种 JSAPI / JS-SDK 乱代码、过时、没注释、不讲流程原理，非常难用。 本文实现了 uni-app H5 移动端网页项目，实现微信支付功能，详细讲解接入流程及超详细示例代码， 从 0-1 完全站在小白的角度，让您无需太多知识也…
阅读更多...
【React】React入门--生命周期

【React】React入门--生命周期

&#x1f380;个人主页&#xff1a;努力学习前端知识的小羊 感谢你们的支持&#xff1a;收藏&#x1f384; 点赞&#x1f36c; 加关注&#x1fa90; 文章目录React生命周期初始化阶段运行中阶段销毁阶段老生命周期的问题新生命周期代替性能优化的方案重要的勾子即将废弃的勾子R…
阅读更多...
【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

重要的不是过去&#xff0c;而是你怎末看待过去&#xff0c;而我们对过去的看法&#xff0c;是可以改变的。 效果预览&#xff1a; &#xff08;1&#xff09;删除表格外框&#xff0c;内框。 &#xff08;2&#xff09;添加表头边框&#xff0c;修改表头文字大小、颜色 &…
阅读更多...
猿创征文 |【高级篇】Java 进阶之JVM实战

猿创征文 |【高级篇】Java 进阶之JVM实战

文章目录⚡前言一、面试题解析二、JVM 理论详解⛅JVM的位置❄️JVM的体系结构⏳类加载器三、JVM 双亲委派机制四、Native 关键字五、PC寄存器 与 方法区六、栈与堆七、三种JVM、新生区、老年区、永久区⛵小结⚡前言 JVM 是 Java 实现 跨平台的基础&#xff0c;所有的Java 程序…
阅读更多...
[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1

如上图所示&#xff0c;这是我解决好的&#xff0c;刚开始的时候爆红有这些&#xff1a; 我按照在网上查找的方法&#xff0c;一一试了。 首先&#xff0c;maven 安装的路径和和本地仓库的目录必须要保持一致 打开setting-Build,Excution,Deployment-Build Tools-Maven&#…
阅读更多...
vue框架介绍

vue框架介绍

概述 Vue 是一套用于构建用户界面的渐进式框架 对渐进式的理解&#xff1a; 每个框架都不可避免会有自己的一些特点&#xff0c;从而会对使用者有一定的要求&#xff0c;这些要求有强有弱&#xff0c;它的强势程度会影响在业务开发中的使用方式。 vue的定位&#xff1a; 我在做…
阅读更多...
【Vue入门必备知识篇03】--- 生命周期 数据共享

【Vue入门必备知识篇03】--- 生命周期 数据共享

前言❤️ 过好自律的生活&#xff0c;美好才会在路上不期而遇 ❤️【Vue入门必备知识篇03】--- 生命周期 & 数据共享一、生命周期 & 数据共享&#xff08;1&#xff09;组件的生命周期1.1 生命周期 & 生命周期函数1.2 组件生命周期函数的分类1.3 生命周期图示&…
阅读更多...
记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

记录Chrome插件从V2版本升级到V3版本的过程中遇到的问题

总结一下自己在把Chrome V2版本的插件升级到V3版本的过程中&#xff0c;遇到的一些问题&#xff0c;之前也有发布一章V3版本的manifest.json配置项参数说明&#xff0c;基本也涵盖了下面提到的几个配置项的改动&#xff0c;传送门>> 总结分了两大块&#xff0c;一块是ma…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023