前端基础学习笔记 表格

表格

在 CSS 创建之前, HTML

元素常常被用于布局页面。 这种用法在 HTML 4之后不被推荐使用,并且
元素 不应该 被用于此目的。

姓名 性别 年龄 爱好
小明 18

不能在table和tr tr和td之间不能套其他元素! 
一些最基本的属性 width height border 而这些标准都被废弃,应该使用样式规定! 
表格的标题用 来定义 
thead tbody tfoot 给表格分组,用于批量修改数据!

合并单元格

你好 啦啦

表格的特征

table 决定了整个表格的宽度 不能被撑开
单元格没有固定宽度时,默认根据内容百分比平分table 的宽度 
表格同一列/行会继承最大值;
th里面的内容默认加粗并且左右上下居中
td里面的内容默认上下居中 左对齐显示
th,td没有margin属性 
td可以嵌套表格 div a img 所有元素

表格的样式

/*指定相邻单元格边框之间的距离*/
border-spacing:10px 10px;
/*用来决定表格的边框是分开的还是合并的*/
border-collapse:collapse;
​
/*表格的样式初始化*/
table{
    border-collapse:collspae;
}
table th,table td{
    padding:0;
}

​

display:table

元素表格的样式排列元素 用到了display:table; 
HTML Table是指使用原生的

标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。

table { display: table }
td, th { display: table-cell }

特性:
支持margin:auto; 
默认内容撑开宽度; 
支持宽高 
表格前后自动换行。块级元素 
关于display:table;的布局:http://www.css88.com/archives/6308

关于display:table­cell;的多种用法:http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable­ cell%E7%9A%84%E5%BA%94%E7%94%A8/

内联框架

iframe 是个内联框架,是在页面(body)里生成个内部框架 一个页面显示多个网页 但是不能嵌套可能的属性:(应该尽量避免使用属性 而样式来控制)

可能的属性:(应该尽量避免使用属性 而样式来控制)

width
height
frameborder  规定是否显示边框 0 = 无 1 = 有  
src  网址 html文档  
scrolling  规定是否显示滚动条 yes = 有 no = 无 auto = 根据内容决定  
name  名字,后期跳转的时候用到的多

你可能感兴趣的:(前端基础学习笔记-CSS,前端基础学习笔记-CSS)