表格
在 CSS 创建之前, HTML <table> 元素常常被用于布局页面。 这种用法在 HTML 4之后不被推荐使用,并且 <table>元素 不应该 被用于此目的。
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<!--两行两列-->
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
<td>男</td>
</tr>
</table>
不能在table和tr tr和td之间不能套其他元素!
一些最基本的属性 width height border 而这些标准都被废弃,应该使用样式规定!
表格的标题用 <th> 来定义
thead tbody tfoot 给表格分组,用于批量修改数据!
合并单元格
<table>
<tr>
<td colspan='跨列'>你好</td>
<td rowspan='跨行'>啦啦</td>
</tr>
</table>
表格的特征
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是指使用原生的 <table> 标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。
table { display: table }
td, th { display: table-cell }
特性:
支持margin:auto;
默认内容撑开宽度;
支持宽高
表格前后自动换行。块级元素
关于display:table;的布局:http://www.css88.com/archives/6308
关于display:tablecell;的多种用法: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 名字,后期跳转的时候用到的多