Blogger Information
Blog 11
fans 0
comment 0
visits 10291
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
制作表格用法以及行列的合并201907-02
简单的博客
Original
695 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品表格</title>
</head>

<body>
<h>商品表格</h>
<!--ul->无序  ol->有序-->
<ul>
    <li>孩子的玩具</li>
    <li>孩子的衣服</li>
    <li>孩子的学习工具</li>
    <li>橡皮</li>
    <li>铅笔</li>
</ul>
<!--制作表格-->
<table border="1" cellpadding="10" cellspacing="0" align="center">
    <!--表标题  caption-->
    <caption style="font-size: 60px">商品列表</caption>
    <!--表头thead-->
    <thead>
    <tr style="font-size: 30px">
        <th>编号</th>
        <th>数量</th>
        <th>名称</th>
        <th>单价</th>
        <th>库存</th>
    </tr>
    </thead>
    <!--表的主体 tbody-->
    <tbody>
        <tr align="center">
            <td width="100px">1</td>
            <td>50</td>
            <td width="200">孩子的玩具</td>
            <td>100</td>
            <td>190</td>
        </tr>
        <tr align="center">
            <td width="100px">2</td>
            <td>50</td>
            <td width="200">孩子的衣服</td>
            <td>100</td>
            <td>222</td>
        </tr>
        <tr align="center">
            <td width="100px">3</td>
            <td>1</td>
            <td width="200">孩子的学习工具</td>
            <td>43</td>
            <td>333</td>
        </tr>
        <tr align="center">
            <td width="100px">5</td>
            <td>3</td>
            <td width="200">铅笔</td>
            <td>90</td>
            <td>111</td>
        </tr>
    </tbody>
    <!--表的底部  tfoot-->
    <tfoot>
        <tr>
            <td colspan="3" align="center">总计</td>
            <!--<td></td>
            <td></td>-->
            <td>400</td>
            <td>7888</td>
        </tr>


    </tfoot>

</table>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

test.png

Correction status:qualified

Teacher's comments:行列的合并, 一个原则, 就是在首先或首列进行
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments