微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5基础08----HTML5表格使用

<!DOCTYPE html>
<!--HTML5表格使用--> <html>
<head lang="en">
    <Meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--没有边框的表格--> <table>
    <!--行<tr>-->  <!--列<td>-->  <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--有边框的表格<table border="1">--> <table border="1">
    <!--行<tr>-->  <!--列<td>-->  <!---->  <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--表格中添加表头 <th>第1列</th>--> <table border="1">
    <!--行<tr>-->  <!--列<td>-->  <!---->  <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--表格中有空单元格--> <table border="1">
    <!--行<tr>-->  <!--列<td>-->  <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--代有标题的表格1<p>标题1</p>--> <p>标题1</p>
<table border="1">
    <!--行<tr>-->  <!--列<td>-->  <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--代有标题的表格2 <caption>标题2</caption>--> <table border="1">
    <caption>标题2</caption>
    <!--行<tr>-->  <!--列<td>-->  <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>第1列</td>
        <td></td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td></td>
    </tr>
</table>
<!--表格内的标签  定义列表  <td>  <ul>  <li>苹果</li>  <li>苹果</li>  <li>苹果</li>  </ul>  </td>--> <table border="1">
    <tr>
        <th>第1列</th>
        <th>第2列</th>
        <th>第3列</th>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>苹果</li>
                <li>苹果</li>
            </ul>
        </td>
        <td></td>
        <td>第3列</td>
    </tr>
</table>
<!--单元格内边距cellpadding="15"--> <table border="1" cellpadding="15">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--单元格外边距cellspacing="15"--> <table border="1" cellspacing="15">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>

<!--表格背景颜色--> <table border="1" bgcolor="#deb88715">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
</table>
<!--表格背景图片background="images/im2.jpg"--> <table background="images/im2.jpg">
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>
    <tr>
        <td>第1列</td>
        <td>第2列</td>
        <td>第3列</td>
    </tr>

</table>

</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。