如有不足请不吝赐教!
最先接触的布局表格,表格灵活性,加载速度都不如<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>的使用细节的更多相关文章

  1. day37—javascript对表格table的操作应用(二)

    转行学开发,代码100天——2018-04-22 昨天学习了JavaScript对table的基本操作,包括表格的创建,表格元素的获取,隔行换色及鼠标动作等.今天主要学习table的搜索查询及排序操作 ...

  2. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. amazeui学习笔记--css(HTML元素5)--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  4. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  5. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  6. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  7. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  8. pre,html转义,abbr缩写,表格table

    <pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...

  9. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

随机推荐

  1. PostgreSQL 10.0 preview 性能增强 - 分区表性能增强(plan阶段加速)

    标签 PostgreSQL , 10.0 , 分区表 , 子表 , 元信息搜索性能增强 背景 PostgreSQL 10.0 增强了分区表的子表搜索性能,对于涉及分区表包含子表特别多的QUERY,可以 ...

  2. 谁需要GUI?快看Linux 终端生存之道

    完全在 Linux 终端中生存并不容易,但这绝对是可行的. 处理常见功能的最佳 Linux shell 应用 你是否曾想像过完完全全在 Linux 终端里生存?没有图形桌面,没有现代的 GUI 软件, ...

  3. 杭电60题--part 1 HDU1003 Max Sum(DP 动态规划)

    最近想学DP,锻炼思维,记录一下自己踩到的坑,来写一波详细的结题报告,持续更新. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 Problem ...

  4. 经过踩坑,搭建成功的Appium自动化测试环境

    因为最近本人准备搞app自动化,所以就搭建环境过程记录下来(主要踩过好几个坑) 期间有点烦躁,后面调整了下心态还是成功弄好了. 一.Appium环境搭建准备软件 所需要到的软件如下: 1.安装JDK1 ...

  5. Python+wxpy 实现微信消息轰炸

    需要导入wxpy,在终端中输入以下命令即可 pip install wxpy 如果没有pip先安装pip,安装好了的直接输入命令即可,安装好了但是显示没有安装的可能是没有将pip添加到PATH中,需要 ...

  6. 《Docker从入门到跑路》之Dockerfile基本操作

    一.简介 Dockerfile是一个文本文件,里面包含一条条指令,每一条指令就是一层镜像.一般情况下,Dockerfile分为4个部分: 基础镜像 维护者信息 镜像操作指令 容器启动时执行命令 例如: ...

  7. ASP.NET Core的配置信息

    ASP.NET Core的配置信息 Key-Value键值对 内存里.JSON.XML.INI等文件 配置信息与配置系统是解耦的 可以依赖注入 ASP.NET Core的配置信息来源 appsetti ...

  8. React 导入组件前段浏览器报错 “Cannot read property 'Component' of undefined”

    问题出在这个花括号上,当你写{React}的时候,他只会导入React,并不会导入下面你要用到的Component组件, 所以,将括号去掉就可以了. 别忘记保存.

  9. Python Tkinter 图形组件介绍

    1. 窗口 Tkinter.Tk() # -*- coding: UTF-8 -*- import Tkinter myWindow = Tkinter.Tk() myWindow.title('南风 ...

  10. 【Hadoop离线基础总结】通过Java代码执行Shell命令

    通过Java代码执行Shell命令 需求 在实际工作中,总会有些时候需要我们通过java代码通过远程连接去linux服务器上面执行一些shell命令,包括一些集群的状态管理,执行任务,集群的可视化界面 ...