HTML:表格table

 表格: table属性:1) border: 设置表格和单元格的边框, 值为整数, 默认02) cellspacing: 设置单元格之间的间距, 默认23) cellpadding: 设置单元格的内边距, 默认14) align: 设置整表格在页面中的位置.值: left(靠左, 默认), right(靠右), center(居中, 常用)5) width: 设置表格的整体宽度值: i. 整数, 表示像素大小ii.百分比, 表示占据整个页面的比例子元素:1) tr: 一行, table row子元素:i) td: 一格, 表格的一个单元格.属性:a.  rowspan: 跨行显示, 默认值1b.  colspan: 跨列显示, 默认值1ii)th: 标题单元格. 文字内容加粗居中2) caption: 表格标题3) thead: 用于包裹tr,被包裹的tr可以设置一样的属性4) tbody: 用于包裹tr5) tfoot: 用于包裹trtr&td的共有属性:1) bgcolor: 设置背景色.值:i.  使用单词, 例如: red, green, blue, ...ii. 使用色号, 以#开头的6位16进制数, 从左到右, 每2位分别表示红绿蓝的颜色占比例如: #000000表示黑色, #ffffff表示白色, #ff0000表示红色2) align: 设置文字在单元格中的水平位置.值: left(靠左对齐, 默认), right(靠右对齐), center(居中对齐, 常用)3) valign: 设置文字在单元格中的垂直位置.值: top(顶部对齐), middle(中间对齐), bottom(底部对齐)

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格示例</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="5" width="600"><tr><td>ID</td><td>姓名</td><td>职务</td><td>部门</td><td>性别</td></tr><tr><td>1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><tr><td>ID</td><td>姓名</td><td>职务</td><td>部门</td><td>性别</td></tr><tr><td>1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr><td>ID</td><td>姓名</td><td>职务</td><td>部门</td><td>性别</td></tr><tr><td>1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr><th>ID</th><th>姓名</th><th>职务</th><th>部门</th><th>性别</th></tr><tr><td>1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr bgcolor="aqua"><th>ID</th><th>姓名</th><th>职务</th><th>部门</th><th>性别</th></tr><tr><td bgcolor="#ff0000">1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr bgcolor="aqua"><th>ID</th><th>姓名</th><th>职务</th><th>部门</th><th>性别</th></tr><tr align="center"><td bgcolor="#ff0000">1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr><td align="right">1002</td><td align="center">王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr bgcolor="aqua"><th>ID</th><th>姓名</th><th>职务</th><th>部门</th><th>性别</th></tr><tr align="center" bgcolor="#f5f5dc"><td>1001</td><td>张老三</td><td>经理</td><td>人事部</td><td>男</td></tr><tr align="center" bgcolor="#f5f5dc"><td>1002</td><td>王老七</td><td>主管</td><td>人事部</td><td>不详</td></tr><tbody align="center" bgcolor="#8fbc8f"><tr><td>1001</td><td>张三丰</td><td>经理</td><td>技术部</td><td>男</td></tr><tr><td>1001</td><td>张翠山</td><td>主管</td><td>技术部</td><td>男</td></tr><tr><td>1001</td><td>张无忌</td><td>职员</td><td>技术部</td><td>男</td></tr></tbody></table><hr><table border="1" cellspacing="0" cellpadding="5" align="center" width="90%"><caption>员工信息表</caption><tr bgcolor="aqua"><th>ID</th><th>姓名</th><th>职务</th><th>部门</th><th>性别</th></tr><tr align="center" bgcolor="#f5f5dc"><td>1001</td><td>张老三</td><td>经理</td><td rowspan="2" valign="top">人事部</td><td>男</td></tr><tr align="center" bgcolor="#f5f5dc"><td>1002</td><td>王老七</td><td>主管</td><!--<td>人事部</td>--><td>不详</td></tr><tbody align="center" bgcolor="#8fbc8f" valign="bottom"><tr><td>1001</td><td colspan="2">张三丰</td><!--<td>经理</td>--><td rowspan="3">技术部</td><td>男</td></tr><tr><td>1001</td><td>张翠山</td><td>主管</td><!--<td>技术部</td>--><td>男</td></tr><tr><td>1001</td><td>张无忌</td><td>职员</td><!--<td>技术部</td>--><td>男</td></tr></tbody></table><hr></body>
</html>

效果：

HTML:表格table相关推荐

latex如何清除表格table的浮动位置（表格自动上移）
一开始,我发现我的表格自动上移,如下: \documentclass{article}\begin{document} hello \begin{table}\centering\begin{tabu ...
表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法参考文章: (1)表格Table宽度设置无效的解决方法 (2)https://www.cnblogs.com/sherryweb/p/11659848.html ...
layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
用ul和li实现表格table效果（转）
用ul和li实现表格table效果,很多时候表格table的框架太死,而且代码太多,如你想加句话至少也要<tr><td></td></tr>说不一定外面 ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
layUI数据表格(table)
 //定义表格 <table class="layui-table" lay-data="{id:'myTable ...
html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整需要把heigh高度写死 table.render({ elem: ...
Jquery导出页面表格table的内容为Excel，PDF，DOC格式
Jquery导出页面表格table的内容为Excel,PDF,DOC格式文档地址:http://www.jqueryfuns.com/resource/2381 1.引入jquery的js–这里就不 ...
手机端自适应表格table样式如何写
有时候我们的网页需要展示一些表格的内容,在pc端是很好控制它的展现方式的,但是到移动端就非常难控制了,那么该怎么做呢? 比如上图就是没控制好的移动端的表格table样式,展示非常的凌乱. 这个就是写好 ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...

HTML:表格table

HTML:表格table相关推荐

最新文章

热门文章