美文网首页
HTML 表格练习题

HTML 表格练习题

作者: TW安洋 | 来源:发表于2016-12-11 16:33 被阅读437次

本节将为大家讲解 HTML 如何实现下图所示表格效果，先来看看最终实现效果吧！

table.png
  • 新建 table.html 文件，并输入以下框架代码（本文编辑器采用Notepad++）；
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

</body>

</html>
  • 对题目要求表格进行分析，可以发现该表格包含：表格标题，表头和内容三部分，且表格共有五行。首先我们先创建表格标题，caption 标签指定表格标题，代码如下所示：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <table border="1">
        <caption>购物车</caption> 
    </table>
</body>

</html>
  • 其次，创建五行内容，其中两行为表头，三行为内容。行用 <tr> 标签表示，代码如下所示：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <table border="1">
        <caption>购物车</caption>
        <tr>
        </tr>

        <tr>
        </tr>

        <tr>
        </tr>

        <tr>
        </tr>

        <tr>
        </tr>
    </table>
</body>

</html>
  • 其次，构建表头。表头包含两行，“名称”和“小计”均占用两行一列行，“2016-11-22”占用一行两列，“重量”和“单价”均占用一行一列。rowspan 属性指定单元格占用行数，colspan 属性指定单元格占用列数，因此表头构建代码如下所示：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <table border="1">
        <caption>购物车</caption>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>

        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>

        <tr>
        </tr>

        <tr>
        </tr>

        <tr>
        </tr>
    </table>
</body>

</html>
  • 接下来，填充表格第3~4行内容，代码如下所示：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <table border="1">
        <caption>购物车</caption>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>

        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>

        <tr>
            <td>苹果</td>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>

        <tr>
            <td>香蕉</td>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>

        <tr>
        </tr>
    </table>
</body>

</html>
  • 最后，填充表格第5行内容，其中“总价”占用一行三列，且居中显示。属性colspan="3"实现单元格占用三列效果，属性align="center"实现居中显示效果，因此表格最终代码实现如下所示：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>
    <table border="1">
        <caption>购物车</caption>
        <tr>
            <th rowspan="2">名称</th>
            <th colspan="2">2016-11-22</th>
            <th rowspan="2">小计</th>
        </tr>

        <tr>
            <th>重量</th>
            <th>单价</th>
        </tr>

        <tr>
            <td>苹果</td>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>

        <tr>
            <td>香蕉</td>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>

        <tr>
            <td colspan="3" align="center">总价</td>
            <td>27元</td>
        </tr>
    </table>
</body>

</html>

相关资料：

W3School上的HTML教程：http://www.w3school.com.cn/tags/tag_table.asp

源码 Github 链接：https://github.com/anyangxaut/HTML-Learning-Demo

相关文章