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

HTML5表格的介绍与使用

时间:2015-07-28 21:19:20      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:html5   表格   

(1)表格中的常见元素,<table>用来定义表格,<caption>定义表格标题,<th>表头,<tr>行,<td>单元,<thead>页眉,<tbody>主体,<tfoot>页脚,<col>列属性

(2)表格的常见用法:

         1,没有边距的表格(代码如下)

                   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <p>标题</p>
    <table>
        <caption>内部标题</caption>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
        </tr>
    </table>
</body>
</html>

         2,表格中的定义表头(代码如下)写在table内部

        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>

         3,空的单元格(代码如下)

                     

<table border="10px">
    <caption>内部标题</caption>
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td></td>//如果要想单元格的内容为空,<td>里面可以不写数据即可
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
    </tr>
</table>

         4,带有标题的表格(代码如下)

                      

<table border="10px">
    <caption>内部标题</caption>、、标题
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
    </tr>
</table>

         5,表格内的标签(代码如下)

                     

<table border="1px">
    <tr>
        <td>表格1

        </td>
        <td>表格2

        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>菠萝</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>我想吃了
        </td>
    </tr>
</table>

         6,单元格的边距(代码如下)

 

<table border="1px" cellpadding="10px">

         7,单元格的间距(代码如下)

<table border="1px" cellspacing="10px" >

         8,表格内的背景颜色和 图像(代码如下)

<table border="1px" cellspacing="10px" background="1.png">//背景图片

<table border="1px" bgcolor="#00ffff">//背景颜色


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

HTML5表格的介绍与使用

标签:html5   表格   

原文地址:http://blog.csdn.net/darongzi1314/article/details/47109427

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!