疯狂--表格

标签：

<style>
    table{
        width:400px;
        border:1px solid black;
    }
    td{
        background-color: #ccc;
        border:1px solid black;
    }
</style>
//////////////////////////

表格标题caption支持top和bottom属性

<table style="border-collapse:collapse;caption-side:top;">
    <caption>无缝表格</caption>
    <tr>
        <td>java</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td>经典 javascript</td>
    </tr>
</table>
<table style="border-collapse:separate;empty-cells:hide;">
    <caption>隐藏空单元</caption>
    <tr>
        <td>java</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td></td>
    </tr>
</table>
<table style="border-collapse:separate;border-spacing:10px">
    <caption>单元格有间距</caption>
    <tr>
        <td>java</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td>经典 javascript</td>
    </tr>
</table>


2、控制表格布局

<style>
    table{
//固定布局方式
        table-layout: fixed;
        border-collapse: collapse;
        border:1px solid black;
    }
    td{
        background-color: #ccc;
        border:1px solid black;
    }
</style>
//////////////////////////

<table>
    <caption>两个col计算出来</caption>
    <col style="width:240px"/>
    <col style="width:80px"/>
    <tr>
        <td>java</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td>经典 javascript</td>
    </tr>
</table>
<table>
    <caption>第一行单元格宽度计算出来</caption>
    <tr>
        <td style="width:80px">java</td>
        <td style="width:300px">javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td>经典javascript</td>
    </tr>
</table>
<table style="width:300px">
    <caption>平均分配宽度</caption>
    <tr>
        <td>java</td>
        <td>javascript</td>
    </tr>
    <tr>
        <td> 经典 java</td>
        <td>经典 javascript</td>
    </tr>
</table>

疯狂--表格

标签：

原文地址：http://www.cnblogs.com/chjb/p/4442725.html