前端基础学习笔记 表格

表格

在 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: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  名字,后期跳转的时候用到的多

猜你喜欢

转载自blog.csdn.net/weixin_41732430/article/details/84788171