一天搞定CSS：表格（table）--19

1.表格标签

表格标签的嵌套关系

<table>
    <!--表格头-->
    <thead>
        <!--表格行-->
        <tr>
            <!--表格列，【注意】这里使用的是th-->
            <th></th>
        </tr>
    </thead>

    <!--表格主体-->
    <tbody>
        <!--表格行-->
        <tr>
            <!--表格列，【注意】这里使用的是td-->
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>

    <!--表格底部-->
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

2.实例演示–课程表

border-collapse:collapse; - - -表示清除表格之间的间隙

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*1.清除表格默认样式*/
            table{
                border-collapse: collapse;
            }
            th,td{
                padding: 0;
            }

            /*2.设置表格大小，以及表框颜色*/
            table{
                margin: 0 auto;
                width: 500px;
            }
            th,td{
                border: 1px solid pink;
                font: 20px/50px "微软雅黑";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            表格标签
                table           表格
                thead           表格头
                tbody           表格主体
                tr              表格行
                th              表格头里的单元格(默认加粗并且居中)
                td              表格主体里的单元格
                tfoot           表格底部

            表格的默认样式
                table{border-collapse:collapse;}        单元格之间的间隙
                th,td{padding:0}

        -->

        <table cellspacing="0">
            <thead>
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.表格行和列的合并

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

效果图：

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
                border-collapse: collapse;
            }
            th,td{
                padding: 0;
            }

            table{
                margin: 0 auto;
                width: 500px;
            }
            th,td{
                border: 1px solid pink;
                font: 20px/50px "微软雅黑";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            表格标签
            rowspan         合并行(竖着合并)
            colspan         合并列(横着合并)
        -->
        <table cellspacing="0">
            <thead>
                <tr>
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="4">    上午</td>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--合并行-->
                    <td rowspan="2">    下午</td>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td>语文  </td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--合并列-->
                    <td colspan="6">夜自习</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

配套小练习

链接地址：http://blog.csdn.net/baidu_37107022/article/details/71713520