11 ­ 第十一章：表格

在 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: separate;

   border-collapse:collapse;
  

边框会合并为一个单一的边框，会忽略border-spacing;

border-spacing: x y 指定单元格边界之间的水平和垂直间距！

表格的样式初始化

    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%8Ddisplaytablecell%E7%9A%84%E5%BA%94%E7%94%A8/

内联框架

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

浏览器本身支持的话，里面的文字是不会被显示出来的，只有不支持的时候里面的文字才会起提示作用。

<iframe src="http://www.baidu.com">您的浏览器不支持iframe，请更换chrome。</iframe>

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

box­shadow 阴影

h­shadow 水平偏移量。允许负值 （ 必需）
v­shadow 垂直偏移量。允许负值 （必需）
blur 模糊半径 （可选。）
spread 阴影的大小 （可选。）
color 阴影的颜色 （可选。）
outset 外部阴影 （默认） 内部阴影（inset可选 ）