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

 

     

目录

     

基础表格

进阶表格

锦上添花表格

bgcolor  background

align

frame元素


基础表格

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

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

html 简单表格制作(看了它足以应对大部分表格)_第1张图片

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

每个表格由 table 标签开始。

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

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



	
	Document


  
姓名 性别 年龄
小明 17
小红 18

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

tr就是我们的行。

td就是我们的列。

border就是我们的边框

进阶表格

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

html 简单表格制作(看了它足以应对大部分表格)_第2张图片

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

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

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



	
	表格
	

工商银行电子汇款单

回单类型 网上转账汇款 指令序号 656515466


卡户 张三

户名 老6
卡号 005161155 卡号 65455
地区 南京 地区 杭州
网点 工商江苏南京业务处理中心 网点 江苏徐州业务中心
币种 人民币 钞标准 钞票
金额 1.00元 手续费 0.75元
合计 人民币(大写):壹
交易时间 2021年 时间戳 2021-06-04-13.00.00.0000

票据打印时间:2021-06-04

票据打印单位:xx银行

操作员:默默

锦上添花表格

 

html 简单表格制作(看了它足以应对大部分表格)_第3张图片

 



	
	表格
	



  
工商银行电子汇款单
回单类型 网上转账汇款 指令序号 656515466


卡户 张三

户名 老6
卡号 005161155 卡号 65455
地区 南京 地区 杭州
网点 工商江苏南京业务处理中心 网点 江苏徐州业务中心
币种 人民币 钞标准 钞票
金额 1.00元 手续费 0.75元
合计 人民币(大写):壹
交易时间 2021年 时间戳 2021-06-04-13.00.00.0000

票据打印时间:2021-06-04

票据打印单位:xx银行

操作员:默默

bgcolor  background





单元背景:

First Row
Second Row

 html 简单表格制作(看了它足以应对大部分表格)_第4张图片

align

消费项目.... 一月 二月
衣服 $241.10 $50.20
化妆品 $30.00 $44.45
食物 $730.40 $650.00
总计 $1001.50 $744.65

html 简单表格制作(看了它足以应对大部分表格)_第5张图片

 

frame元素



frame="box" 全边框

frame="above" 只有上边框

frame="below" 只有下边框

frame="hsides" 只有上下边框

frame="vsides" 只有左右边框

 

你可能感兴趣的:(html,前端)