• 技术文章 >web前端 >html教程

    HTML进行表格制作

    醉折花枝作酒筹醉折花枝作酒筹2021-04-30 09:18:03转载142
    本篇文章给大家介绍一下HTML进行表格制作的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    HTML中制作表格有两种方法:

    (1)先把最原始的表格画出来,每一个都是单个单元格,然后再根据要求进行行合并或列合并,有的表格需要行列都合并,则也是把它分为两步做,先合并行再合并列(或者先合并列再合并行),若进行了colspan和rowspan的合并,则将之后同一行或同一列的单元格删除,但这种方法较麻烦,容易搞混。

    (2)直接根据最终要生成的表格来操作,将每个合并的单元格看做一个小的单元格,不再将它拆分,然后一行一行的写表格,遇到合并的单元格直接写出colspan或rowspan,下面若遇到已经用过的合并的单元格,则不再将其算到内,只看还剩多少单元格。这种方法一行一行的写,不用再去删单元格,比较清晰。

    以下为制作的一个简单表格及其代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表格</title>
    </head>
    <h3 align="center">项目增补单</h3>
    <table border="1" height="500" width="1000" cellspacing="0" align="center">
    	<tr align="center">
        	<td>序号</td>
            <td>维修项目及更换配件</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>工时费</td>
            <td>合计</td>
            <td>故障原因</td>
        </tr>
        <tr align="center">
        	<td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
        	<td rowspan="4">7</td>
            <td></td>
            <td colspan="2" rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
            <td rowspan="4"></td>
        </tr>
        <tr align="center">
        	<td></td>
        </tr>
        <tr align="center">
        	<td></td>
        </tr>
        <tr align="center">
        	<td></td>
        </tr>
        <tr >
        	<td colspan="2">备件费用小计:</td>
            <td colspan="5">工时费用小计:</td>
            <td>合计:</td>
        </tr>
        
    </table>
    <table height="50" width="900" align="center">
    	<tr>
    		<td>班组长:</td>
            <td>技术部:</td>
            <td>服务顾问:</td>
            <td>客户确认:</td>
    	</tr>
    </table>
    <body>
    </body>
    </html>

    推荐学习:html视频教程

    以上就是HTML进行表格制作的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:html 制作表格
    上一篇:CSS+HTML如何实现顶部导航栏 下一篇:springboot如何返回html和jsp
    第16期线上培训班

    相关文章推荐

    • html超链接怎么设置• html5的优势有哪些• html怎么让元素隐藏• html的元素是什么• CSS+HTML如何实现顶部导航栏

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网