简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4.23号作业1-html5表格制作及行合并列合并
Blogger Information
Blog 20
fans 0
comment 0
visits 29206
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4.23号作业1-html5表格制作及行合并列合并
蜗牛是条鱼
Original
1371 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己来默写表格</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="400">

    <!--表格名称-->
    <caption>购物车</caption>
    <!--表头部分-->
    <thead>
    <tr bgcolor="aqua">
        <th>编号</th>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
        <th>分类</th>
    </tr>
    </thead>
    <!--表格内容-->
    <tbody>
    <tr>
        <td>1</td>
        <td>钢笔</td>
        <td>2</td>
        <td>3</td>
        <td>6</td>
        <td rowspan="2">文具</td>
    </tr>
    <tr>
        <td>2</td>
        <td>笔记本</td>
        <td>3</td>
        <td>10</td>
        <td>30</td>
    </tr>
    <tr>
        <td>3</td>
        <td>水果刀</td>
        <td>5</td>
        <td>6</td>
        <td>30</td>
        <td>刀具</td>
    </tr>
    </tbody>
    <!--表格底部-->
    <tfoot>
    <tr>
        <td colspan="2">合计</td>
        <td>10</td>
        <td></td>
        <td>66</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

本章写的过程中知识总结：
第一。表格可以用思路拆分。 拆分成主要两部分。 第一部分表头，第二部分表格内容
表头用 thead 开始，包住表头的内容。
表格内容按照表格有的内容直接层层按顺序写出即可
中间注意区别。  表头代码是  <thead><tr><th>根据内容次序写</th></tr></thead>
表格内容是   <tbord><tr><td> 层层对应表头写内容</td></tr></tbord>

中间两个常用点
1.列合并  表格内容里面重起一行   <tfoot><td colspan=""></td></tfoot> 合并几行
写几行，同时删除掉合并过的行。
2.行合并。  行合并需要加表头，<td rowspan=""></td>  同理列合并。

第三个知识点 表格的属性。
1.表格可以加背景，<bgcolor></bgcolor>  可以加边框 <table border="1" cellspacing=""></table> 等


总结：这种把表格分开处理的方式非常简单易懂，后期学习中，多多熟练运用。

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
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！