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

来源：互联网发布：程序员中级考试答案编辑：程序博客网时间：2024/05/24 06:05

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

0 0