table的相关用法

1.cellspacing 用于设置表格内部每个单元格之间的间距
2.表格内文字与边框间距cellpadding
3.表格背景颜色 bgcolor
4.表格背景图像 background=”背景图像地址”
5.单个单元格也可以设置自己的属性（如高度，背景颜色，边框颜色等），并且可对单个单元格的垂直和水平对齐进行操作
6.水平跨度colspan=”跨越的列数”
7.垂直跨度rowspan=”跨越的行数”
8.bordercolorlight=”亮边框的颜色”
table模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
             td{
                text-align: center;

            }
            /*
              table{
                border-color: aquamarine;
            }
            */ 

        </style>
    </head>
    <body>
        <table align="center" width="600px" height="200px" border="1px" bordercolor="#66CCFF" cellspacing="5" cellpadding="5" bgcolor="blanchedalmond" >
            <caption >标题</caption>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
            <tr><td bordercolordark="CC00FF">第一行第一列</td><td rowspan="2">第一,2行第二列</td><td>第一行第三列</td><td>第一行第四列</td></tr>
            <tr><td>第二行第一列</td><td>第二行第三列</td><td>第二行第四列</td></tr>
            <tr valign="bottom"><td valign="bottom" colspan="2">第三行第一2列</td><td>第三行第三列</td><td>第三行第四列</td></tr>
            <tr  height="30px"><td bordercolorlight="CC00FF">第四行第一列</td><td bordercolorlight="3300FF">第四行第二列</td><td>第四行第三列</td><td>第四行第四列</td></tr>
        </table>
</html>

表格的结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table>
            <thead bgcolor="FF33FF" align="center">
                <tr>
                    <td>属性1</td>
                    <td>属性2</td>
                    <td> 属性3</td>
                </tr>
            </thead>
            <tbody bgcolor="#CC88EE" align="left">
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                </tr>
                <tr>
                    <td>1.1</td>
                    <td>1.2</td>
                    <td>1.3</td>
                </tr>
            </tbody>
            <tfoot bgcolor="aliceblue"  align="right">
                <tr><td colspan="3" align="right">表尾内容</td></tr>
            </tfoot>
        </table>
    </body>
</html>

猜你喜欢