一天搞定CSS:表格(table)--19

1.表格标签

一天搞定CSS:表格(table)--19_第1张图片

表格标签的嵌套关系

<table>
    
    <thead>
        
        <tr>
            
            <th>th>
        tr>
    thead>

    
    <tbody>
        
        <tr>
            
            <td>td>
        tr>
        <tr>
            <td>td>
        tr>
    tbody>

    
    <tfoot>
        <tr>
            <td>td>
        tr>
    tfoot>
table>

2.实例演示–课程表

border-collapse:collapse; - - -表示清除表格之间的间隙
一天搞定CSS:表格(table)--19_第2张图片

代码演示


<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 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 合并列(横着合并)

效果图:

一天搞定CSS:表格(table)--19_第3张图片

代码演示


<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>
        
        <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

转载于:https://www.cnblogs.com/TCB-Java/p/6853962.html

你可能感兴趣的:(一天搞定CSS:表格(table)--19)