设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 怎么让表格并列在一起，我做出的老是上下的，如图
返回列表 发新帖
查看: 2894|回复: 5

[已解决]怎么让表格并列在一起，我做出的老是上下的，如图

[复制链接]
天道8
发表于 2022-4-11 00:57:36 | 显示全部楼层 |阅读模式
50鱼币
求修改下代码，谢谢各位大神。
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OA办公系统</title>
</head>
 
<body bgcolor="white" leftmargin="0" topmargin="0">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody>
      <tr>
              <td bgcolor = "blue" colspan="5" height="69" style="color:white">        OA办公系统 </td>
        <td colspan="5"><img src="daohang01.png" width="60" height="69"/></td>
        <td colspan="5" height="69"style="color:white" bgcolor = "blue">          办公桌面</td>
                <td  colspan ="5"><img src = "daohang02.png" width="60" height = "69"></td>
                <td colspan="5"height="69"style="color:white" bgcolor = "blue">工作周报</td>   
                <td  colspan ="1"><img src = "daohang03.png" width="60" height = "69"></td>
                <td colspan="5" height="69"style="color:white" bgcolor = "blue">密码修改</td>
                <td  colspan ="1"><img src = "daohang04.png" width="60" height = "69"></td>
                <td colspan="5" height="69"style="color:white" bgcolor = "blue">安全退出</td>
                <td  colspan ="1"><img src = "个人照片.png" width="60" height = "69"></td>
                <td colspan="5" height="69" bgcolor = "blue"style="color:white">xxxxxxx</td>        
      </tbody>
                      <table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
                                <tr>
                         <td  colspan ="0"><img src = "img_03.jpg" width="20%" height = "100%"></td>
                         <tr>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" height="50%">
                            <table border= "1px" width="800"  cellspacing="0px">
                            <tr>
                                                <th>编号</th>
                                                <th>标题</th>
                                                <th>问题来源</th>
                                                <th>客户反馈</th>
                                                </tr>
                                        <tr>
                                                <td>20150525</td>
                                                <td>欢迎访问OA办公平台</td>
                                                <td>192.18.1.6</td>
                                                <td>填写的不错</td>
                                        </tr>
                                        <tr>
                                                <td>20150312</td>
                                                <td>办公室发奖金名单确定了办公效率</td>
                                                <td>192.18.3.14</td>
                                                <td>以后努力</td>
                                        </tr>
                                        <tr>
                                                <td>20151104</td>
                                                <td>设计要注意细节</td>
                                                <td>192.18.1.1</td>
                                                <td>总结的不错</td>
                                        </tr>
                                        <tr>
                                        <td>20150808</td>
                                        <td>如何做好界面的实设计工作</td>
                                        <td>192.18.1.1</td>
                                        <td>值得学习</td>
                                        </tr>
                                        </table>
                    </table>
                 </table> 
     </table> 
      </body>      
</html>               
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-11 00:57:37
在搞这个东西前要搞懂你要的布局，
无非就是表格里面嵌套表格，
表格 行列
<table>
<tr>
<td></td>
</tr>
</table>
这才是一个完整的表格，不要搞得只有tr，没有/tr等等，表格都是嵌套到单元格里的，也就是<td> </td>中。

以下为示例：
2022411_205139.png 
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OA办公系统</title>
</head>

<body bgcolor="white" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor = "blue" colspan="5" height="69" style="color:white">        OA办公系统 </td>
          <td colspan="5"><img src="daohang01.png" width="60" height="69"/></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">          办公桌面</td>
          <td  colspan ="5"><img src = "daohang02.png" width="60" height = "69"></td>
          <td colspan="5"height="69"style="color:white" bgcolor = "blue">工作周报</td>
          <td  colspan ="1"><img src = "daohang03.png" width="60" height = "69"></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">密码修改</td>
          <td  colspan ="1"><img src = "daohang04.png" width="60" height = "69"></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">安全退出</td>
          <td  colspan ="1"><img src = "个人照片.png" width="60" height = "69"></td>
          <td colspan="5" height="69" bgcolor = "blue"style="color:white">xxxxxxx</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="1" cellpadding="1" cellspacing="1">
        <tr>
          <td width="300px" height="800"><table width="100%" border="1" cellpadding="1" cellspacing="1" >
              <tr>
                <td  colspan ="0"><img src = "img_03.jpg" width="20%" height = "100%"></td>
              </tr>
            </table></td>
          <td><table border= "1px" width="800"  cellspacing="0px">
              <tr>
                <th>编号</th>
                <th>标题</th>
                <th>问题来源</th>
                <th>客户反馈</th>
              </tr>
              <tr>
                <td>20150525</td>
                <td>欢迎访问OA办公平台</td>
                <td>192.18.1.6</td>
                <td>填写的不错</td>
              </tr>
              <tr>
                <td>20150312</td>
                <td>办公室发奖金名单确定了办公效率</td>
                <td>192.18.3.14</td>
                <td>以后努力</td>
              </tr>
              <tr>
                <td>20151104</td>
                <td>设计要注意细节</td>
                <td>192.18.1.1</td>
                <td>总结的不错</td>
              </tr>
              <tr>
                <td>20150808</td>
                <td>如何做好界面的实设计工作</td>
                <td>192.18.1.1</td>
                <td>值得学习</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
并列图.png

最佳答案

ba21

查看完整内容

在搞这个东西前要搞懂你要的布局， 无非就是表格里面嵌套表格， 表格 行列 这才是一个完整的表格，不要搞得只有tr，没有/tr等等，表格都是嵌套到单元格里的，也就是 中。 以下为示例：
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-11 00:57:37 | 显示全部楼层    本楼为最佳答案   
在搞这个东西前要搞懂你要的布局，
无非就是表格里面嵌套表格，
表格 行列
<table>
<tr>
<td></td>
</tr>
</table>
这才是一个完整的表格，不要搞得只有tr，没有/tr等等，表格都是嵌套到单元格里的，也就是<td> </td>中。

以下为示例：
2022411_205139.png 
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OA办公系统</title>
</head>

<body bgcolor="white" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor = "blue" colspan="5" height="69" style="color:white">        OA办公系统 </td>
          <td colspan="5"><img src="daohang01.png" width="60" height="69"/></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">          办公桌面</td>
          <td  colspan ="5"><img src = "daohang02.png" width="60" height = "69"></td>
          <td colspan="5"height="69"style="color:white" bgcolor = "blue">工作周报</td>
          <td  colspan ="1"><img src = "daohang03.png" width="60" height = "69"></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">密码修改</td>
          <td  colspan ="1"><img src = "daohang04.png" width="60" height = "69"></td>
          <td colspan="5" height="69"style="color:white" bgcolor = "blue">安全退出</td>
          <td  colspan ="1"><img src = "个人照片.png" width="60" height = "69"></td>
          <td colspan="5" height="69" bgcolor = "blue"style="color:white">xxxxxxx</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="1" cellpadding="1" cellspacing="1">
        <tr>
          <td width="300px" height="800"><table width="100%" border="1" cellpadding="1" cellspacing="1" >
              <tr>
                <td  colspan ="0"><img src = "img_03.jpg" width="20%" height = "100%"></td>
              </tr>
            </table></td>
          <td><table border= "1px" width="800"  cellspacing="0px">
              <tr>
                <th>编号</th>
                <th>标题</th>
                <th>问题来源</th>
                <th>客户反馈</th>
              </tr>
              <tr>
                <td>20150525</td>
                <td>欢迎访问OA办公平台</td>
                <td>192.18.1.6</td>
                <td>填写的不错</td>
              </tr>
              <tr>
                <td>20150312</td>
                <td>办公室发奖金名单确定了办公效率</td>
                <td>192.18.3.14</td>
                <td>以后努力</td>
              </tr>
              <tr>
                <td>20151104</td>
                <td>设计要注意细节</td>
                <td>192.18.1.1</td>
                <td>总结的不错</td>
              </tr>
              <tr>
                <td>20150808</td>
                <td>如何做好界面的实设计工作</td>
                <td>192.18.1.1</td>
                <td>值得学习</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

天道8
 楼主| 发表于 2022-4-11 01:09:13 | 显示全部楼层
最终效果是这样的
效果图.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

洋洋痒
发表于 2022-4-11 08:58:56 | 显示全部楼层
高楼大厦一看就是背景图片
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

天道8
 楼主| 发表于 2022-4-11 12:14:49 | 显示全部楼层
洋洋痒 发表于 2022-4-11 08:58
高楼大厦一看就是背景图片

是背景图片，想让他们并列
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-11 21:04:35 | 显示全部楼层
还有图片不一定是单元格中插入<img>
也有可能是哪个表格的背景。
实际怎么运用，灵活使用即可。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 16:00

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表