html表格的制作

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

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

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

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

51449a3318334beba0ac95be71d697ff.png

<!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>

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值