表格table

构成: caption表名+thead表头+tbody+tr行+td表格+tfoot表尾
常用属性 colspan=“2” rowspan=“2” 合并两列/行
cellspacing=“0” cellpadding=“0” 取消表格间隙
border-collapse:collapse;合并边框

美化表格样式项目

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旅行計劃表</title><link rel="stylesheet" type="text/css" href="table.css"/>
</head>
<body><table><caption>旅行計劃表</caption><tr><td>天數</td><td>時間</td><td>行程</td><td>費用(元)</td></tr><!-- 第一天 --><tr><td rowspan="4" class="oneDayEnd">第一天</td><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr class="oneDayEnd"><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><!-- 第一天 --><tr><td rowspan="4" class="oneDayEnd">第一天</td><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><tr class="oneDayEnd"><td>8:00-10:00</td><td>乘車到八達嶺長城</td><td>￥50/人</td></tr><!-- 總計 --><tr class="oneDayEnd"><td style="text-align: left;" colspan="3">長城旅行社</td><td style="text-align: right;">總計: ￥400</td></tr></table>
</body>
</html>

CSS

table {border-collapse: collapse;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 600px;
}
table td {height: 30px;line-height: 30px;
}
table caption {font-weight: bold;font-size: 1.5em;border-bottom: 2px solid black;padding-bottom: 10px;
}
table tr:nth-child(1) {font-weight: bold;font-size: 1.1em;border-bottom: 2px solid black;
}
table tr:nth-child(n+2) {border-bottom: 1px dashed black;
}
table .oneDayEnd {border-bottom: 2px solid black!important;
}
table td.oneDayEnd {vertical-align: top;
}
table tr :last-child {text-align: right;
}
table tr:nth-child(n+2) :last-child {border-left: 2px dotted black;
}

前端知识-表格知识+美化表格样式项目相关推荐

vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单
一.数据编辑操作 1.填充数据填充数据见上一节自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据第一步:开始选项卡里找到查找或者Ctil+F 第 ...
HTML的基本知识（六）——表格的基本属性之实现个人简历
HTML的基本知识(六)--表格的基本属性之实现个人简历如今你的气质里,藏着你走过的路,读过的书和爱过的人." --<卡萨布兰卡> 一.表格 (1)表格的作用:表格在数据展示方 ...
【第50、51天】jQuery基本知识，LayUI动态表格的学习
1 jQuery基础 1.1 原生DOM元素(JS元素)与jQuery元素为什么不是同一种元素?两者如何转换? 1.2 基本选择器在jQuery中的使用 1.3 四大核心函数 1.4 常用事件定义方式 ...
套用带标题行的表格样式_649.Excel技巧：如何利用表格样式快速美化表格？
之前牛闪君发表过一篇如何对表格进行专业美化的文章获得小伙伴的认可,但那种表格美化的方法效率相对比较低,通常都要手工设置字体大小,颜色,以及网格线等参数设置.有小伙伴也询问有没有快速美化表格的方法,例如 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
HTML—— 超链接行内框架表格知识总结。
目录一.超链接 1. 简述 2. 举例 3.链接分类: 4. 属性详解阻止a链接跳转二.行内框架(内联框架) 1. 简介 2. 举例 3. 属性详解三.表格 1. 表格基本结构 2. 结构详解 ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
EduCoder-Web程序设计基础-html5—表格高级样式的设置-第2关：设置表格的外边框样式
目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务:创建一个两行两列的表格.实现的效果如下图所示: 外边框设置相关知识为了完成本关任务,你需要掌握:1.table标签的一般 ...

前端知识-表格知识+美化表格样式项目

表格table

美化表格样式项目

HTML

CSS

前端知识-表格知识+美化表格样式项目相关推荐

最新文章

热门文章