CSS 表格制作日历

原创 2015年11月21日 20:36:41

看看最后的效果
这里写图片描述
css 的样式代码如下所示

<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
            table.ca1 {
                border-collapse: separate;
                border-spacing: 0;
                text-align: center;
                color: #333;
            }
            .ca1 th, .ca1 td {
                margin: 0;
                padding: 0;
            }

            .ca1 caption {
                font-size: 1.25em;
                padding-top: 0.629em;
                background-color: #d4dde6;
            }

            .ca1 caption[rel="prev"] {
                float: left;
                margin-left: 0.2em;
            }
            .ca1 caption[rel="next"] {
                float: right;
                margin-right: 0.2em;
            }
            .cal caption a:link, .cal caption a:visited {
                text-decoration: none;
                color: #333;
                padding: 0 0.2em;
            }
            .cal caption a:hover, 
            .cal caption a:active, 
            .cal caption a:focus {
                background-color: #6d8ab7;
            }

            .cal thead th{
                background-color: #D4DDE6;
                border-bottom: 1px solid #a9bacb;
                font-size: 0.875em;
            }

            .cal tbody{
                color: #a4a4a4;
                text-shadow: 1px 1px 1px white;
                background-color: #d0d9e2;
            }

            .cal tbody td{
                border-top: 1px solid #e0e0e1;
                border-right: 1px solid #9f9fa1;
                border-bottom: 1px solid #acacad;
                border-left: 1px solid #dfdfe0;
            }

            .cal tbody a{
                display: block;
                text-decoration: none;
                color: #333;
                background-color: #c0c8d2;
                font-weight: bold;
                padding: 0.385em 0.692em 0.308em 0.692em;
            }

            .cal tbody a:hover,
            .cal tbody a:focus,
            .cal tbody a:active,
            .cal tbody .selected a:link,
            .cal tbody .selected a:visited,
            .cal tbody .selected a:hover,
            .cal tbody .selected a:focus,
            .cal tbody .selected a:active{
                background-color: #6d8ab7;
                color: white;
                text-shadow: 1px 1px 2px #22456b;
            }
            .cal tbody td:hover,
            .cal tbody td.selected{
                border-top: 1px solid #2a3647;
                border-right: 1px solid #465977;
                border-bottom: 1px solid #576e92;
                border-left: 1px solid #466080;
            }
        </style>

    </head>
    <body>

        <table class="cal" summary="A calendar style date picker">
            <caption>
                <a href="#" rel="prev">&lt;</a>一月 2016<a href="#" rel="next">&gt;</a>
            </caption>
            <colgroup>
                <col id="sun" />
                <col id="Mon" />
                <col id="Tue" />
                <col id="Wed" />
                <col id="Tur" />
                <col id="Fri" />
                <col id="Sat" />
            </colgroup>

            <thead>
                <tr>
                    <th scope="col">Sun</th>
                    <th scope="col">Mon</th>
                    <th scope="col">Tue</th>
                    <th scope="col">Wed</th>
                    <th scope="col">Tur</th>
                    <th scope="col">Fri</th>
                    <th scope="col">Sat</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td class="null">30</td>
                    <td class="null">31</td>
                    <td><a href="#">1</a></td>
                    <td><a href="#">2</a></td>
                    <td><a href="#">3</a></td>
                    <td><a href="#">4</a></td>
                    <td><a href="#">5</a></td>
                </tr>
                <tr>
                    <td><a href="#">6</a></td>
                    <td><a href="#">7</a></td>
                    <td><a href="#">8</a></td>
                    <td><a href="#">9</a></td>
                    <td><a href="#">10</a></td>
                    <td><a href="#">11</a></td>
                    <td><a href="#">12</a></td>
                </tr>
                <tr>
                    <td><a href="#">13</a></td>
                    <td><a href="#">14</a></td>
                    <td><a href="#">15</a></td>
                    <td><a href="#">16</a></td>
                    <td><a href="#">17</a></td>
                    <td><a href="#">18</a></td>
                    <td><a href="#">19</a></td>
                </tr>
                <tr>
                    <td><a href="#">20</a></td>
                    <td><a href="#">21</a></td>
                    <td><a href="#">22</a></td>
                    <td><a href="#">23</a></td>
                    <td><a href="#">24</a></td>
                    <td><a href="#">25</a></td>
                    <td><a href="#">26</a></td>
                </tr>
                <tr>
                    <td><a href="#">27</a></td>
                    <td><a href="#">28</a></td>
                    <td><a href="#">29</a></td>
                    <td><a href="#">30</a></td>
                    <td><a href="#">31</a></td>
                    <td><a href="#">1</a></td>
                    <td><a href="#">2</a></td>
                </tr>

            </tbody>

        </table>

    </body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS创建当前月份的日历table型

返回的是一个字符串,并不是原生可以直接使用的。最重要的是setDate负值的使用,很有意思。然后判断了一下,输出的日期是否在当月范围内。其实用getMonth的方式也是可以的。var createCa...
  • sbt0198
  • sbt0198
  • 2016年06月30日 14:32
  • 1806

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

手把手教你做html日历

废话少说,直接上代码: 示例
  • cometwo
  • cometwo
  • 2015年12月21日 09:10
  • 3792

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

HTML+CSS日历制作

日历 .month{   border-collapse:collapse;   table-layout:fixed;   width:780px; } .month caption { text...

Jquery + CSS 制作条纹table表格

  • 2009年03月03日 13:33
  • 30KB
  • 下载

制作1px表格边框的十种方法(html和css)

第一种: 使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px 第二种: 第三种:利用二级表格 www.blueidea.com 第四种:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 表格制作日历
举报原因:
原因补充:

(最多只允许输入30个字)