老师帮忙看看这个怎么设计

我是夏同学 2019-09-18

源自：HTML表格 3-1 表格布局（1）

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-09-18 11:57:58

同学你好，

是想实现这样一个表格吗？例如截止到第一项内容：

可以将table分成6行4列，例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0" width="600">
        <caption style="text-align: left;">
            <h2>采购项目表</h2>
            <span >清购部门:(加盖公章)</span>
        </caption>
        <tr>
            <td>项目名称</td>
            <td></td>
            <td>项目类型</td>
            <td>(新建)</td>
        </tr>
        <tr>
            <td>采购计划类型</td>
            <td>计划内/计划外</td>
            <td>拟完成采购时间</td>
            <td></td>
        </tr>
        <tr>
            <th colspan="4">一、立项审批情况</th>
        </tr>
        <tr>
            <td>编号</td>
            <td></td>
            <td>名称</td>
            <td></td>
        </tr>
        <tr>
            <td>审批人</td>
            <td></td>
            <td>审批意见</td>
            <td></td>
        </tr>
        <tr>
            <td>密级</td>
            <td></td>
            <td>时间</td>
            <td></td>
        </tr>
    </table>
</body>

</html>

效果：

自己可以测试下，祝学习愉快！

收起回答

我是夏同学提问者 #1

老师是这样的把这整个表格当成是一个页面，然后里面的数据就是这样的，应该怎么设计，我目前刚学完表格，这是工作上要写的页面，不知道怎么设计能好看一些

2019-09-18 12:25:16
好帮手慕星星回复提问者我是夏同学 #2

上面老师给你举例子了哦，按照老师的思路实现就可以。先把大体框架实现出来，也就是几行几列的表格。如果想要样式的话，需要学习后面的css，才可以实现更美观一些。

2019-09-18 13:51:14
我是夏同学提问者回复好帮手慕星星 #3

谢谢老师，回复及时

2019-09-18 21:58:06