CSS基础--表格

A complete guide to the table element.

*A very basic example:

<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Favorite Color</th>
  </tr>
  <tr>
    <td>Jim</td>
    <td>00001</td>
    <td>Blue</td>
  </tr>
  <tr>
    <td>Sue</td>
    <td>00002</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Barb</td>
    <td>00003</td>
    <td>Green</td>
  </tr>
</table>

<style>
td,th{ border:1px solid #999;padding:0.5rem; }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>ID</td>
                <td>Favorite Color</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jim</td>
                <td>00001</td>
                <td>Blue</td>
            </tr>
            <tr>
                <td>Sue</td>
                <td>00002</td>
                <td>Red</td>
            </tr>
            <tr>
                <td>Barb</td>
                <td>00003</td>
                <td>Green</td>
            </tr>
        </tbody>
    </table>
</body>

using: table{border-collapse:xxx}来影响(默认是2px)

<style>
table{ border-collapse:collapse;}
td,th{ border:1px solid #999;padding:0.5rem; }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>ID</td>
                <td>Favorite Color</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jim</td>
                <td>00001</td>
                <td>Blue</td>
            </tr>
            <tr>
                <td>Sue</td>
                <td>00002</td>
                <td>Red</td>
            </tr>
            <tr>
                <td>Barb</td>
                <td>00003</td>
                <td>Green</td>
            </tr>
        </tbody>
    </table>
</body>

 

<!--规定属于其父元素的第1个子元素的每个 td 的背景色：-->
<!-- hsl(h,s,l) HSL即是代表色调，饱和度，亮度三个通道的颜色 -->
<!-- 0(或360)表示红色，120表示绿色，240表示蓝色 -->
<style>
table{ border-spacing:0.5rem;}
td{ padding:0.5rem;}
td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }
</style>
</head>
<body>
    <table>
        <tr>
            <td>This</td>
            <td>Little</td>
            <td>Piggy</td>
            <td>Went</td>
            <td>To</td>
            <td>Market</td>
        </tr>
        <tr>
            <td colspan="2">This</td>
            <td>Little</td>
            <td>Piggy</td>
            <td>Went</td>
            <td>Market</td>
        </tr>
        <tr>
            <td colspan="4">This</td>
            <!--会占用下一行，以及下下一行-->
            <td rowspan="3">Little</td>
            <td>Piggy</td>
        </tr>
        <tr>
            <!--会占用下一行-->
            <td rowspan="2">This</td>
            <td>Little</td>
            <td>Piggy</td>
            <td>Went</td>
            <td>To</td>
        </tr>
        <tr>
            <td>Little</td>
            <td>Piggy</td>
            <td>Went</td>
            <td>To</td>
        </tr>
    </table>
</body>

 

 

使用DIV来做table: (没有直接使用table元素来做好)

<style>
.Table{
    display:table;
}
.Title{
    display:table-caption;
    text-align:center;
    font-weight:bold;
    font-size:larger;
}
.Heading{
    display:table-row;
    font-weight:bold;
    text-align:center;
}
.Row{
    /*此元素会作为一个表格行显示（类似 <tr>)*/
    display:table-row;
}
.Cell{
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    display:table-cell;
    border:solid;
    border-width:thin;
    padding-left:5px;
    padding-right:5px;
}
</style>
</head>
<body>
    <div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>
</body>

 

hodler

posted on 2016-09-18 20:38  yeatschen  阅读(82)  评论(0)    收藏  举报

导航