问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用table画表格，没头绪。。

头像
Richie_Xie
    34366587

    图片描述

    任务是画这个表格 用table 一直没有用过table 现在一头雾水 求教 谢谢

    htmlcss
    阅读 4.4k
    5 个回答
    得票最新
    头像
    沈文
      861
      ✓ 已被采纳

      表格类做法首先设计最小单位，需要多少行多少列，然后针对每格是跨行还是跨列，进行调整。
      代码：

      <html>
<table border="1">
    <tr>
        <td rowspan="2">销方</td>
        <td colspan="5">名称： <select name="" id=""></select></td>
        <td rowspan="2">购方</td>
        <td colspan="4">名称</td>
    </tr>
    <tr>
        <td colspan="5">纳税人识别号：</td>
        <td colspan="4">纳税人识别号：</td>
    </tr>
    <tr>
        <td rowspan="6">开具红字专用发票内容</td>
        <td>行号</td>
        <td>货物或应税劳务名词</td>
        <td>规格型号</td>
        <td>单位</td>
        <td>数量</td>
        <td>单价(不含税)</td>
        <td>金额(不含税)</td>
        <td>税率</td>
        <td>税额</td>
        <td>操作</td>
    </tr>
    <tr>
        <td></td>
        <td><select name="" id=""></select></td>
        <td>示例文字</td>
        <td>个</td>
        <td></td>
        <td>10000.00</td>
        <td>20000.00</td>
        <td>100%</td>
        <td>20000.00</td>
        <td>操作</td>
    </tr>
    <tr>
        <td></td>
        <td><select name="" id=""></select></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>操作</td>
    </tr>
    <tr>
        <td></td>
        <td><select name="" id=""></select></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>操作</td>
    </tr>
    <tr>
        <td></td>
        <td><select name="" id=""></select></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>操作</td>
    </tr>
    <tr>
        <td></td>
        <td><select name="" id=""></select></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>操作</td>
    </tr>
    <tr>
        <td colspan="11">合计：</td>
    </tr>
    <tr>
        <td>说明</td>
        <td colspan="5">
            <input name="a" type="radio"/> 一、购买方申请<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;<input name="b" type="radio"/> 已抵扣<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;<input name="b" type="radio"/> 未抵扣<br/>
            <input name="a" type="radio"/> 二、销售方申请<br/>
        </td>
        <td colspan="5">
            对应蓝字专用发票密码区内打印的发票信息<br/>
            发票代码 <input/><br/>
            发票号码 <input/><br/>
            发票种类：增值税专用发票<br/>
            联系电话 <input/><br/>
            申请理由 <input/><br/>
        </td>
    </tr>
</table>

</html>

      备注：
      说明这快也可以按行，列进行设计，然后去掉边框就好。
      效果图：
      效果图

      头像
      丁Hee
        312

        像你平常那样写就行，把该合并的合并一下就行了。（colspan和rowspan）

        头像
        林小志
        4.4k2218

        • 打开Dreamweaver，画

        • 打开word，画，然后导出网页格式，不过这样的话，代码很丑

        • 网络上我记得好像有不少画表格的小工具，画了之后可以直接获得表格的 HTML 代码

        这个表格有不少合并的地方，如果对于 colspan 和 rowspan 不是很了解的话，那么就利用一些可视化的工具来操作吧。

        头像
        人生点滴
          2
          新手上路，请多包涵

          你可以用table导出xls实现任何想要的

          头像
          arvin丶阿亮
            3381312

            table样式你应该做得来吧？里面的数据操作，也就是form相关，然后配合上js的操作（点击ajax更新一行数据 ）等等就好了
            table外面可以用form抱起来操作，下面的也就是td里面嵌入select/checkbox等等罢了

            <table class="table table-bordered">
    <tr>
        <td rowspan="2">销方</td>
        <td>名称： <select name="" id=""></select></td>
        <td rowspan="2">购方</td>
    </tr>
    <tr>
        <td>纳税人识别号：</td>
        <td>纳税人识别号：</td>
    </tr>
</table>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题