关于table

 

# table 属性bgcolor:设置表格的背景颜色 #
<!--属性bgcolor:设置表格的背景颜色-->

　　<table border="1" bgcolor="red">
    <tr>
        <td>
            测试数据
        </td>
    </tr>
    <tr>
        <td>
            测试数据
        </td>
    </tr>
　　</table>

　　<!--属性cellpadding：设置表格内容与边框的距离，如果设置了padding:0时，则无效，产生冲突-->
　　<table border="1" bgcolor="red" cellpadding="60">
        <tr>
            <td>
                测试数据
            </td>
        </tr>
        <tr>
            <td>
                测试数据
            </td>
        </tr>
　　</table>

# table属性cellspacing:设置列间距 
<!--属性cellspacing:设置列间距　　-->
　　<table border="1" bgcolor="red" cellspacing="10">
        <tr>
            <td>
                测试数据
            </td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>
                测试数据
            </td>
            <td>
                测试数据
            </td>
        </tr>
　　</table>

# table CSS 样式中使用border-spacing　来设置相邻单元格边框之间的距离 
<!--ＣＳＳ使用border-spacing　来设置相邻单元格边框之间的距离-->
　　<table border="1" bgcolor="red" style="border-spacing: 20px">
        <tr>
            <td>
                测试数据
            </td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>
                测试数据
            </td>
            <td>
                测试数据
            </td>
        </tr>
　　</table>

# table CSS 样式中使用border-collapse合并一个单一边框 #
<!--　ＣＳＳborder-collapse合并一个单一边框　-->
　　<table border="1" style="border-collapse: collapse" bgcolor="red">
        <tr>
            <td>
                测试数据
            </td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>
                测试数据
            </td>
            <td>
                测试数据
            </td>
        </tr>
    　　
　　</table>

# table CSS 样式中使用table-layout:fixed;固定宽度 #
<!--table-layout:fixed;固定宽度为200，里面字体自动换行-->
　　<table border="1" style="table-layout:fixed;width:200px;border-collapse: collapse" bgcolor="red">
        <tr>
            <td>
                测试数据测试数据测试数据测试数据测试数据
            </td>
            <td>测试数据测试数据测试数据测试数据</td>
        </tr>
        <tr>
            <td>
                测试数据测试数据
            </td>
            <td>
                测试数据测试数据测试数据
            </td>
        </tr>
    　　
　　</table>　

 

# table CSS 样式中使用table-layout:auto;相对宽度 #
<!--table-layout:auto;相对宽度，自适应-->
　　<table border="1" style="table-layout:auto;width:200px;border-collapse: collapse" bgcolor="red">
        <tr>
            <td>
                测试数据测试数据测试数据测试数据测试数据
            </td>
            <td>测试数据测试数据测试数据测试数据</td>
        </tr>
        <tr>
            <td>
                测试数据测试数据
            </td>
            <td>
                测试数据测试数据测试数据
            </td>
        </tr>
    　　
　　</table>

 

 

 

 

DISPLAY用法：


 # 对span设置宽高是无效的 #

    <span style="border:1px solid red;height: 100px;width: 100px">测试数据</span>
    <span style="border:1px solid red;height: 100px;width: 100px">测试数据</span>
    <br/>
    <br/>


   #把span转换成块级元素，就可以对其设置宽和高，可以看到已自动换行 #


    <span style="border:1px solid red;display: block;height: 100px;width: 100px">测试数据</span>
    <span>测试数据</span>
    <span>测试数据</span>

    <div style="border:1px solid red;height: 100px;width: 100px">测试数据</div>
    <br/>


# 把div转换成内嵌元素，不能再对其设置宽和高 #
    <div style="display: inline;height: 100px">测试数据</div>
    <div>测试数据</div>
    <!--把div转换成内嵌元素，但是还是具有一些块级元素的功能，比如宽和高-->
    <div style="border:1px solid red;display: inline-block;height: 100px">测试数据</div>

 

 

 

#  关于position #

<div style="border:1px solid black;height: 500px;width: 500px">

        <!--使用position:relative;是相对于自身进行定位，还是在常规流里，不会对其他元素造成影响-->
        <div style="position:relative;border:1px solid red;background-color:blue;height: 100px;width: 100px"></div>
        <div style="border:1px solid black;height: 100px;width: 100px"></div>
        
        <!--使用position:absolute;使div拖离常规流，以离他最近的父级元素拥有position为准-->
        <div style="z-index:1;position:absolute;border:1px solid black;background-color:blueviolet;height: 100px;width: 300px"></div>
        <div style="z-index:2;border:1px solid black;height: 200px;width: 100px"></div>
    </div>