Html中表格相关操作

第一个HTML5程序

代码如下：

<html>
<head>
    <title>HTML测试</title>
    <style type="text/css">
        table {
            width: 600px;
            border-collapse: collapse;
        }

        th, td {
            border: none;
        }

        th {
            background-color: #000;
            color: #fff;
        }
        /*奇数行和偶数行颜色*/
        tr:nth-of-type(2n+1) {
            background-color: #F3F3F3;
        }

        tr:nth-of-type(2n) {
            background-color: #ddd;
        }
        /*除第一列之外的对齐方式*/
        td:nth-child(n+2) {
            text-align: right;
        }
        /*最后一行*/
        tr:last-child {
            font-weight: bolder;
        }
        /*最后一列*/
        td:last-child {
            font-weight: bolder;
        }

        tr:last-child td:last-child {
            font-size: 24px;
        }
        /*倒数第二行*/
        tr:nth-last-child(2) {
            color: green;
        }
        /*表格最后两行*/
        tr:nth-last-child(-n+2) td {
            text-align: right;
        }
        /*添加链接*/
        a:after {
        content:" ("attr(href)") ";
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            if (window.onbeforeprint != undefined) {
                window.onbeforeprint = ShowLinks;
                window.onafterprint = HideLinks;
            }
        })
        function ShowLinks() {
            $("a").each(function () {
                $(this).data("linkText", $(this).text());
                $(this).append("("+$(this).attr("href")+")");
            });
        }
        function HideLinks() {
            $("a").each(function () {
                $(this).text($(this).data("linkText"));
            });
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Coffee mug</td>
            <td>$10.00</td>
            <td>5</td>
            <td>$50.00</td>
        </tr>
        <tr>
            <td>Coffee mug</td>
            <td>$10.00</td>
            <td>5</td>
            <td>$50.00</td>
        </tr>
        <tr>
            <td>Coffee mug</td>
            <td>$10.00</td>
            <td>5</td>
            <td>$50.00</td>
        </tr>
        <tr>
            <td colspan="3">Subtotal</td>
            <td>$150.00</td>
        </tr>
        <tr>
            <td colspan="3">Subtotal</td>
            <td>$150.00</td>
        </tr>
    </table>
    <a href="Link1">Test</a>
</body>
</html>

运行效果：

以上效果在火狐和谷歌浏览器下有效，不支持IE

posted @ 2012-11-07 16:03  bradleydan  阅读(144)  评论(0)    收藏  举报