2019-08-12 21:30

关注

4.14 HTML5 表格使用

我们先了解一下表格中的一些标签：

图片说明

我们选几个常用的标签在代码中测试一下：
新建一个 index02.html 文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table>
        <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>

用 table 定义表格，tr 定义一行，td 定义一个单元。用浏览器打开：

图片说明

如果用鼠标选中可以发现这是单元格的形式，但是我们并没有看到边框。我们来加上边框：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <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>

刷新会发现出现了边框：

图片说明

我们还可以把边框扩大，相应的增加 border 值就可以：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="10">
        <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>

刷新浏览器就可以看到效果：

图片说明

边框变得非常大，非常粗。这就是最简单的表格定义方式。其他的属性就不一一介绍了，大家可以自己尝试一下。我们选出了几种常用的表格样式，下面来实现一下。

没有边框的表格
其实这就是上面那个例子把 border 属性去掉后的样子。
表格中的表头
用 th 来定义表头，我们在上个例子的基础上增加表头：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <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>单元格3</td>
        </tr>
    </table>
</body>
</html>

刷新浏览器：

图片说明

明显发现表头的文字是有着重效果的，这就是单元格的表头。

空的单元格
很多时候并不是所有的单元格中都要包含内容，我们只需要在相应的标签中不书写内容就可以了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

这个时候就变成了：

图片说明

这时候就变成空的单元格了。

带有标题的表格

带有标题的表格有几种形式，我们可以在最外层添加：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <p>表格</p>
    <table border="1">
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td></td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

刷新浏览器：

图片说明

这个时候等于给他加了一个头。我们再用另一种方式：

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

刷新浏览器：

图片说明

这次有了居中的效果。

表格内的标签
我们用 ul 标签来修改下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>苹果</li>
                    <li>菠萝</li>
                    <li>香蕉</li>
                </ul>
            </td>
            <td>我想吃了</td>
        </tr>
    </table>
</body>
</html>

图片说明

可以看出列表的效果了。

单元格的边距
我们可以试着更改边距来更改表格的大小。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
            <td>表格3</td>
        </tr>
        <tr>
            <td>表格4</td>
            <td>表格5</td>
            <td>表格6</td>
        </tr>
    </table>
    <br/>
    <table border="1" cellpadding="10">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
            <td>表格3</td>
        </tr>
        <tr>
            <td>表格4</td>
            <td>表格5</td>
            <td>表格6</td>
        </tr>
    </table>
</body>
</html>

在浏览器中看下效果：

图片说明

大家发现两个表格一样的数据但是下面的大了许多。

单元格间距
这里用到了属性 cellspacing ，将 cellpadding="10" 更换为 cellspacing="10" ，来看下效果：

图片说明

单元格之间的间距变大了，跟刚才的效果完全不一样的。

表格内的背景颜色和图像
有时候为了美观的会有这种需求，我们先来试一下颜色：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
            <td>表格3</td>
        </tr>
        <tr>
            <td>表格4</td>
            <td>表格5</td>
            <td>表格6</td>
        </tr>
    </table>
    <br/>
    <table border="1" bgcolor="9400d3">
        <tr>
            <td>表格1</td>
            <td>表格2</td>
            <td>表格3</td>
        </tr>
        <tr>
            <td>表格4</td>
            <td>表格5</td>
            <td>表格6</td>
        </tr>
    </table>
</body>
</html>

看下效果：

图片说明