表格的定义

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr> 、<th> 或 <td> 元素组成表格结构；

其中：<tr> 元素定义表格行， <th> 元素定义表头，<td> 元素定义表格单元。

为了让表格更美观，我们会用到：border，colspan，rowspan，align，valign，bgcolor 等来美化表格。

表格的标签

在HTML定义表格的时候，会使用以下标签：

表格标签	用处
<table>	定义表格，生成的表格在一对<table></table>中；
<caption>	定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<th>	定义表格的表头，一般是表头中的内容会被加黑；(用于表格标题)
<tr>	定义表格的行（注意：tr可以设置高度不能设置宽度）
<td>	定义表格单元格（注意：td可以设置宽度不能设置高度）
<col>	定义用于表格列的属性
<colgroup>	定义表格列的组

单元格边框 (border)

表格边框：在使用 <table border="1"></table> 的方式来定义，其中：数字表示边框的宽度，单位为像素。

合并单元格

1 合并行单元格：colspan 是水平方向单元格的合并

2 合并列单元格：rowspan 是上下方向单元格的合并

单元格的对齐

1.水平对齐（align）（居中，左对齐，右对齐）

在对应的标签上增加 align 键值对，生效方式为"就近原则"

align 值	left	center	right
效果	左对齐	居中	右对齐

2、垂直对齐（valign）（居中，上对齐，下对齐）

背景色&图片（bgcolor & background）

添加背景色使用：bgcolor
添加背景图片使用：background

单元格的边距（cellpadding）

在 <table></table> 标签使用 cellpadding 即可，方法与上面的图片一样，直接举例如下：

<table border="2" cellpadding="6">

单元格间的距离(cellspacing)

<table border="1" cellspacing="0" cellpadding="10">

显示部分边框（frame & rules）

可以在 <table></table> 标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：

frame 键值	效果
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
rhs	显示右边的外侧边框
box	在所有四个边上显示外侧边框
border	在所有四个边上显示外侧边框

可以在 <table></table> 标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：

frame 键值	效果
none	没有线条
groups	位于行组和列组之间的线条
rows	位于行之间的线条
cols	位于列之间的线条
all	位于行和列之间的线条

练习1

<!DOCTYPE html>
<html lang="en"><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"><title>Document</title>
</head><body><h3><center>武隆区中小微企业贷款贴息项目申请表</center></h3><table width="600" border="1" cellspacing="0" cellpadding="0" align="center"><tr align="center"><td width="100">统一社会<br>信用代码</td><td colspan="2" width="200"></td><td width="100">企业所在地</td><td width="200" colspan="2"></td></tr><tr align="center" height="60"><td width="100">法人代表</td><td width="100"></td><td width="100">联系方式</td><td></td><td width="100">上年度营业收入（万元）</td><td width="100"></td></tr><tr height="30" align="center"><td colspan="2">上年度实交税金（万元）</td><td></td><td colspan="2">企业缴纳社保人数（人）</td><td></td></tr><tr height="" align="center"><td>贷款所用<br>项目名称</td><td colspan="2"></td><td width="80">申请贴息<br>金额（万元）</td><td colspan="2"></td></tr><tr align="center" height="30"><td rowspan="3" width="100" >贷款银行名称</td><td></td><td rowspan="3">贷款金额</td><td></td><td rowspan="3">已支付利息</td><td></td></tr><tr align="center" height="30"><td></td><td></td><td></td></tr><tr align="center" height="30"><td></td><td></td><td></td></tr><tr  align="center" height="30"><td rowspan="2" >银行开户许可证信息</td><td colspan="2" >账户名称</td><td>开户行</td><td colspan="2">账号</td></tr><tr align="center" height="30"><td colspan="2"></td><td></td><td colspan="2"></td></tr><tr><td colspan="3">是否列入国家信用系统严重失信企业名单和重大税法违法案件信息公布名单</td><td colspan="3"></td></tr></table>
</body></html>

练习2

<!DOCTYPE html>
<html lang="en">
<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"><title>名单</title></head>
<body><table align="center" style="font-size: 10px;"><tr class="title" height="30" align="center"><th width="60" bgcolor="#EB7030">姓名</th><th width="180" bgcolor="#EBA330">入职企业</th><th width="100" bgcolor="#FFC91C">入职时间</th><th width="120" bgcolor="#6EB540">技术方向</th><th width="80" bgcolor="#78A782">试用期</th><th width="70" bgcolor="#9FEC30">转正</th></tr><tr height="30" align="center"><td>王月</td><td>东方文化出版社</td><td>2013-03-06</td><td>UI设计师</td><td>4200</td><td>5800</td></tr><tr height="30" align="center" bgcolor="#E9E9E9"><td>刘文玉</td><td>北京慧聪邓白氏研究公司</td><td>2013-02-03</td><td>BENET网络工程师</td><td>6000</td><td>8000</td></tr><tr height="30" align="center"><td>吕方</td><td>北大青鸟研究院</td><td>2013-05-15</td><td>网络营销师</td><td>4500</td><td>5600</td></tr><tr height="30" align="center" bgcolor="#E9E9E9"><td>杨亚</td><td>上海白林广告公司</td><td>2013-06-17</td><td>Java工程师</td><td>3500</td><td>4500</td></tr><tr height="30" align="center"><td>白杨</td><td>东方文化出版社</td><td>2013-03-03</td><td>网页制作师</td><td>3000</td><td>4000</td></tr><tr height="30" align="center" bgcolor="#E9E9E9"><td>杨文</td><td>惠星文化传媒公司</td><td>2013-06-03</td><td>营销经理</td><td>6800</td><td>8800</td></tr><tr height="30" align="center"><td>张智</td><td>北京动力研究院</td><td>2013-02-08</td><td>力学研究专员</td><td>12000</td><td>18000</td></tr><tr height="30" align="center" bgcolor="#E9E9E9"><td>成方</td><td>北大青鸟研究院</td><td>2013-02-03</td><td>软件工程师</td><td>6000</td><td>8000</td></tr><tr height="30" align="center"><td>陈苹</td><td>北京动力研究院</td><td>2013-02-09</td><td>办公室主任</td><td>12000</td><td>18000</td></tr></table>
</body>
</html>

html 表格的使用相关推荐

jvm虚拟机规范紧接上文的
dneg dneg指令是类型安全的,if在传入的操作数堆栈中有一个类型匹配的双倍数.dneg指令不改变类型状态. instructionIsTypeSafe(dneg, Environment, _O ...
TensorRT 数据和表格示例
TensorRT 数据和表格示例 TensorRT 7.1在绑定索引方面比其前身更加严格.以前,允许错误配置文件的绑定索引.考虑一个网络,该网络具有四个输入,一个输出,以及在其中的三个优化配置文件 I ...
HarmonyOS UI开发 TableLayout(表格布局) 的使用
TableLayout 是什么 TableLayout 是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...
python 读取excel 表格的数据
自己随便写了一个表格如下使用工具xlrd 如果没有下载可以使用pip install xlrd 下载一个大致需要一下几个步骤 1 打开excel table = xlrd.open_workbo ...
Python xlrd 读取excel表格常用用法整理
xlrd 的使用 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys.setdefaul ...
TableLayout 表格布局,FrameLaout 帧布局，AbsoluteLayout绝对布局的分析
这三个布局就放在一起来写了他们用的比较少,不过为了写这遍博客我换特意去复习了下, 第一个表格布局TableLayout 表格布局顾名思义就是与表格类似,以行,列形式来管理其中的组件的, 它是< ...
0x02 mysql 表格相关操作
1.创建table 语法: create table 表格名称(列名类型); NOT NULL:该列数据不能为空 AUTO_INCREMENT:定义该字段是否自增 primary key(xxx) ...
html表格联动,html前端基础：table和select操作
html前端基础:table和select操作发布时间:2020-05-13 09:58:10 来源:亿速云阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
表格下划线怎么加粗_这招高！Excel签名栏的下划线随列宽变化，是不是感觉牛哄哄的？...
职场牛人的世界总有各种高招,随手蹦出,令人赞叹不已! 今天早上去填一个表格,在输入签名时,突然发现签名处的下划线是随着列宽的变化而自动变化,这绝对是动态的,这是怎么做到的呢? 我特意看了一下这个单元格 ...
python excel操作单元格_python 操作excel表格的方法
说明:由于公司oa暂缺,人事妹子在做考勤的时候,需要通过几个excel表格去交叉比对员工是否有旷工或迟到,工作量大而且容易出错. 这时候it屌丝的机会来啦,花了一天时间给妹子撸了一个自动化脚本. 1. ...

html 表格的使用

阅读目录

表格的定义

表格的标签

显示部分边框（frame & rules）

练习1

练习2

html 表格的使用相关推荐

最新文章

热门文章