010day（表格及其相关属性）
一、表格
1.表格是什么：页面中用来显示数据
2.课表/日历/成绩单/oa系统
3.语法结构：
<table>
<tr>
<td></td>
...
</tr>
...
但是：如果没有加特殊的属性每一行中的单元格数量必须一致
</table>
4.表格的属性
加到table里面的：border设置边框 cellspcaing边框与边框之间的距离【默认为1px】 width/height align【设置table的位置】
bgcolor【背景颜色】 cellpadding【文字与边框之间的距离】
加到tr里面的：height="200px" align="center" bgcolor="yellow" 需要注意从te中无法设置宽度
加到td里面的:width="300px" height="300px" align="left" bgcolor="green"
colspan/rowspan
colspan:跨列成行 在同一行中进行操作，他后面的属性值等于删除掉【同一行中的】的单元个数+1
rowspan:跨行成列 在同一列中进行操作，他后面的属性值等于删除掉【同一列中的】的单元个数+1
二、表格相关的css属性
1、border-spacing:20px;单元格间距单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
2、border-collapse:separate/collapse;合并相邻单元格边框合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
3、empty-cells:show/hide;无内容时单元格的设置定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；
4、table-layout:auto/fixed;是否固定单元格的宽度fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化
5、caption-side:top/right/bottom/left表格标题位置left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top
三、表格相关的HTML标签和属性
1、表格标题<caption>标题内容</caption>
2、表格列分组
意义：A.<colgroup span="数字"></colgroup>
B.<col span="数字" />
C.如果用rules添加组分割线的话，列分组必须用colgroup
说明：A.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
B.span属性显示指定相邻几列组成一组，span属性值默认为1
3、表格行分组
A.<thead></thead> 表头
B.<tbody></tbody> 表体
C.<tfoot></tfoot> 表尾
4、添加组分隔线rules="groups/rows/cols/all/none"必须给table标签添加属性
四、做表格基本思路如下表
附注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>
<table border="1px"cellspacing="0" width="814px"height=312px">
<tr>
<td colspan="7">个人简历</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td width="100px">姓名</td>
<td width="100px"></td>
<td width="100px">性别</td>
<td width="100px"></td>
<td width="100px">年龄</td>
<td width="100px"></td>
<td rowspan="4" width="200px"></td>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td>电话</td>
<td></td>
<td>正义面貌</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td colspan="6">毕业院校</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<td colspan="7">求职意向</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
</table>
</body>
</html>
附注2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>表格</caption>
<colgroup>
<col span="1" bgcolor="pink" width="300px">
<col span="2" bgcolor="blur" width="200px">
<col span="1" bgcolor="pink" width="300px">
</colgroup>
<tr>
<td>姓名</td>
<td>电话</td>
<td>邮编</td>
<td>传真</td>
</tr>
<tr>
<td>阿斯顿</td>
<td>213123123</td>
<td>321312312</td>
<td>312312312</td>
</tr>
<tr>
<td>阿斯顿</td>
<td>213123123</td>
<td>321312312</td>
<td>312312312</td>
</tr>
<tr>
<td>阿斯顿</td>
<td>213123123</td>
<td>321312312</td>
<td>312312312</td>
</tr>
<tr>
<td>阿斯顿</td>
<td>213123123</td>
<td>321312312</td>
<td>312312312</td>
</tr>
</table>
</body>
</html>
附注3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
thead{
background-color: red;
}
tfoot{
background-color: green;
}
table,th,td{
border: 1px solid yellowgreen;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">拼搏到无能为力，奋斗感动自己，加油小老弟小老妹们</td>
</tr>
</tfoot>
</table>
</body>
</html>
附注4、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border-color: #FBBFD9;
}
td{
color: #FBBFD9; font-weight: 900;
}
</style>
</head>
<body>
<table border="1px "cellspacing="0"width="612px" height="360px" >
<tr align="center">
<td width="100px">会员姓名</td>
<td colspan="2" width="200px"></td>
<td width="100px">出生日期</td>
<td colspan="2" width="200px"></td>
</tr>
<tr align="center">
<td>身份证号</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>通信地址</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>联系电话</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>会员卡号</td>
<td colspan="5"></td>
</tr>
</table>
</body>
</html>
附注5、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px"width="700px" cellspacing="0">
<tr align="center">
<td width="50px">工作单</td>
<td width="100px"></td>
<td width="50px">车牌号</td>
<td colspan="2"></td>
<td>车型</td>
<td></td>
<td>技师</td>
<td></td>
<td>检修时间</td>
<td width="100px"></td>
</tr>
<tr align="center">
<td>序号</td>
<td colspan="3" width="230px">维修项目及更换配件</td>
<td>单价</td>
<td>数量</td>
<td>小记</td>
<td>工时费</td>
<td>合计</td>
<td colspan="2">故障原因</td>
</tr>
<tr align="center">
<td>1</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>2</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>3</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>4</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>5</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>6</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>7</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>8</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>9</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td>10</td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4">配件费用小记：</td>
<td colspan="5">工时费用小记:</td>
<td colspan="2">合计:</td>
</tr>
</table>
<table >
<tr align="center">
<td width="150px">班组长：</td>
<td width="150px">技术部：</td>
<td width="150px">服务顾问：</td>
<td width="180px">客户确认：</td>
</tr>
</table>
</body>
</html>
附注6、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.qu{
border-right: none;
}
.ququ{
border-left: none;
}
</style>
</head>
<body>
<table border="1px"width="700px" cellspacing="0">
<tr align="center">
<td colspan="2">姓 名</td>
<td></td>
<td>职务</td>
<td colspan="2"></td>
<td colspan="2">出差是由</td>
<td colspan="4"></td>
</tr>
<tr align="center">
<td>起日</td>
<td>值日</td>
<td>起始地点</td>
<td>项 目</td>
<td >张数</td>
<td colspan="3">金 额</td>
<td>项 目</td>
<td>天数</td>
<td colspan="2"width=70px">金 额</td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td>火车费</td>
<td></td>
<td colspan="2" width="4px"></td>
<td></td>
<td>途中补助</td>
<td></td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td>汽车飞</td>
<td></td>
<td colspan="2" width="4px"></td>
<td></td>
<td>祝亲不住</td>
<td></td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td>市内交通费</td>
<td></td>
<td colspan="2" width="4px"></td>
<td></td>
<td>夜间乘车</td>
<td></td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td>住宿费</td>
<td></td>
<td colspan="2" width="4px"></td>
<td></td>
<td>其 他</td>
<td></td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td>邮电费</td>
<td></td>
<td colspan="2" width="4px"></td>
<td></td>
<td></td>
<td></td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td></td>
<td></td>
<td></td>
<td colspan="2">小 记</td>
<td colspan="2" width="4px"></td>
<td></td>
<td colspan="2">小 记</td>
<td width="50px"></td>
<td></td>
</tr>
<tr align="center">
<td colspan="3">合 计</td>
<td class="qu">（大写）</td>
<td class="ququ" colspan="8">千 百
十 元
分
010day（表格及其相关属性）相关推荐
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- 前端学习之表格、列表相关属性
**表格相关属性:**主要用于控制表格的外观, 表格相关属性有如下几个. ➢border-collapse: 该属性控制两个单元格的边框是合并在一起,还是按照标准的HTML样式分开该属性有两个值,即s ...
- js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- 前端基础-html-表格的基本标签和相关属性
<!-- 表格的基本标签 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 基本标签: table:表格整体,可用于包裹多个tr tr:表格每行,可用于包裹td td:表格单元 ...
- html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表 有序列表 有序列表 语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
- css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
- PyQt（Python+Qt）入门：Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
- CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载 本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
- linux查看nginx运行状态,如何查看nginx运行状态及相关属性说明
如何查看nginx运行状态及相关属性说明. 需要查看nginx是否已经加载了 http_stub_status_module模块 /usr/sbin/nginx -V 查看nginx的安装状态 ng ...
最新文章
- 福利内卷时代来临！腾讯为 3300 名员工发 11 亿红包
- Activity的setContentView的流程
- mysqldump命令详解（转载）
- 百度景鲲：疫情居家让智能音箱经受了检验，下一步「破圈」
- pythoning ——3、数据类型（字符串）
- mysql查看连接数
- Java的设计模式----strategy(策略模式)
- 计算机如何“看懂”图片？达摩院提出新的研究方法
- ACM——2的n次方
- 新浪sea增加php,php接口 连接新浪云sea的mysql数据库
- 码云webhook php,PHP实现码云Gitee的WebHook密钥验证算法
- R语言ETL工程：插入与合并（add/bind）
- yuv420p 详解_YUV格式详解,图文详解YUV420数据格式
- 37岁老表弟接触Python，在危机中抓住新机，3年搭建Python金融“金字塔”
- 加入Web前端学习还有市场吗？自己是否适合学习前端
- 装箱与拆箱（TDB）
- 【OGNL表达式struts2标签“%，#，$”】
- Python-matplotlib画图，柱状图，双柱图，折线图，散点图，饼图，线柱混合图。附代码模板与详细注释
- java虚拟机系列:java虚拟机内存模型
- 大学计算机基础2014,2014《大学计算机基础》课程学习手册(学生).pdf