二,表格<table>的使用细节
如有不足请不吝赐教!
最先接触的布局表格,表格灵活性,加载速度都不如<div>灵活,但是对于萌新来说再定位某些,例如div里面套文字,而刚接触html+css又不懂得那么多使用<span>,<p>,或者display:block来定位,最先想到的就是表格定位文字,可能达不到想要的效果,但是也差不了许多,但是美观上总会差那么一点。
表格标签<table></table>成对使用,内嵌标签有<tr>表格内列标签,<td>单元格标签,<th>中的文字回成粗体更大的字体显示,来定义表格的标题。
<table>主要属性有,
cellpadding="0" 这个属性主要控制单元格与单元格内容的距离,如果设置为0,单元格内容会紧贴单元格
cellspacing="0" 单元格与单元格之间的距离,设置为0之后单元格可以实现边框共用,但是不如css样式中的
border-collapse: collapse;让表格的边框共用,比如你已经设置了cellspacing="0",border="0",还是觉得边框粗,这时候这个属性会让整个表格的边框实现真正意义上的公用,让边框更细。
合并单元格Colspan横向 和 rowspan 纵向 属性来实现内容横跨多个行或列,注意的是当使用合并之后单元格并不是真正的合并,而是使用的单元格实现了跨行或者跨列显示,这时候会在原来的表格内多出一个单元格,而这个单元格会被挤出来,只需要查看代码找到他,直接删除相应的<td>,一般挤出的单元格都会想右,纵向横向相同。
内容居中显示,水平align:center,垂直vertical:middle,
表格上方单独显示,也就是表头的意思,<caption>销售人员成绩考核</caption>

最后说说表格的宽高,宽高设定值首先要满足内容的宽高,其次以设定的值为准,最后如果都没有设置,然后正行的高以最高的单元格为准。
<tr>没有设置宽度时,平均分配,<tr><td>都设置了高,满足内容情况下取最高的。
二,表格<table>的使用细节的更多相关文章
- day37—javascript对表格table的操作应用(二)
转行学开发,代码100天——2018-04-22 昨天学习了JavaScript对table的基本操作,包括表格的创建,表格元素的获取,隔行换色及鼠标动作等.今天主要学习table的搜索查询及排序操作 ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- html表格table设置边框
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- css列表list、表格table
列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...
- 表格(Table)隔行变色
在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...
- pre,html转义,abbr缩写,表格table
<pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
随机推荐
- 精确计算微信小程序scrollview高度,全机型适配
众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...
- 瑞幸咖啡还是星巴克,一杯下午茶让我明白 设计模式--模板方法模式(Template Method Pattern)
简介 Define the skeleton of an algorithm in an operation,deferring some steps to subclasses.Template M ...
- JavaWeb开发规范
以下的建议将帮助你更有效地使用本文所描述的 Java 编程标准: ******************************************************* 当你写代码时就应该遵守 ...
- django最全面的知识点,直接开发完整手机购物商城练手,
带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址: https://www.duans ...
- 推荐一款Python数据可视化神器
1. 前言 在日常工作中,为了更直观的发现数据中隐藏的规律,察觉到变量之间的互动关系,人们常常借助可视化帮助我们更好的给他人解释现象,做到一图胜千文的说明效果. 在Python中,常见的数据可视化库有 ...
- G. Yash And Trees 线段树 + dfs序 + bitset
这个是要用bitset 一个大整数的二进制 学习推荐博客 这个题目大意就是:给你n,m 还有一个序列,还有一个一棵树,有一种操作一种询问 操作是给你一个节点 把这个节点及其子节点都加上x 询问是 给你 ...
- 系统通配符号、系统正则符号,grep
系统通配符号.系统正则符号,grep 1 系统通配符号 系统通配符号:借助通配符号 匹配文件名称信息 1.1 *: 匹配所有(任意)字符信息 找寻以old开头的文件 find /oldboy -typ ...
- 使用Hystrix的插件机制,解决在使用线程隔离时,threadlocal的传递问题
背景 在我们的项目中,比较广泛地使用了ThreadLocal,比如,在filter层,根据token,取到用户信息后,就会放到一个ThreadLocal变量中:在后续的业务处理中,就会直接从当前线程, ...
- 自定Tinymce中的图片上传
在引入组件上添加 上传图片的url地址 <tinymce :height="300" ref="tinymce" //上传图片的url地址 upload- ...
- vue滑动吸顶以及锚点定位
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...