首页 > Web开发 > 详细

HTML5-表格

时间:2015-04-06 14:05:32      阅读:240      评论:0      收藏:0      [点我收藏+]

表格:表头<caption>,行<tr>,列<td>,标题<th>

属性:cellpadding="10" cellspacing="10":单元格间距,单元格边距|

bgcolor="#8a2be2"【背景颜色】,background="images/html.jpg"【背景图片】


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <p>表格</p>
    <table border="1">
        <caption>重要表格</caption>
        <!-- <caption>重要表格</caption>:表头-->
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>
                <ul>
                    <li>苹果</li>
                    <li>苹果</li>
                    <li>苹果</li>
                </ul>
            </td>
        </tr>

    </table>
    <br/>
    <table border="1" cellpadding="10" cellspacing="10" bgcolor="#8a2be2">
        <!--  cellpadding="10" cellspacing="10":单元格间距,单元格边距-->
        <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格4</td>
            <td>单元格6</td>
        </tr>
    </table>
    <!-- bgcolor="#8a2be2"【背景颜色】,background="images/html.jpg"【背景图片】-->
    <br/>
    <table border="1" cellpadding="10" cellspacing="10" background="images/html.jpg">
        <!--  cellpadding="10" cellspacing="10":单元格间距,单元格边距-->
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格4</td>
            <td>单元格6</td>
        </tr>
    </table>
</body>
</html>

 

HTML5-表格

原文:http://www.cnblogs.com/wintuzi/p/4395779.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!