码迷,mamicode.com
首页 > Web开发 > 详细

HTML5-表格

时间:2015-04-06 14:06:09      阅读:166      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!