前端基础学习笔记表格

傷城~ 2022-04-11 02:50 285阅读 0赞

# 表格 #

在 CSS 创建之前， HTML <table> 元素常常被用于布局页面。 这种用法在 HTML 4之后不被推荐使用，并且 <table>元素 不应该 被用于此目的。

不能在table和tr tr和td之间不能套其他元素！   
一些最基本的属性 width height border 而这些标准都被废弃，应该使用样式规定！   
表格的标题用 <th> 来定义   
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是指使用原生的 <table> 标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。

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

**特性：**  
支持margin:auto;   
默认内容撑开宽度；   
支持宽高   
表格前后自动换行。块级元素   
关于display:table;的布局：[http://www.css88.com/archives/6308][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/][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  名字，后期跳转的时候用到的多

[http_www.css88.com_archives_6308]: http://www.css88.com/archives/6308
[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]: 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%C2%AD%20cell%E7%9A%84%E5%BA%94%E7%94%A8/