左侧显示一直不对。帮忙看下哪里的问题。谢谢
<!doctype html>
<html>
<head>
<title>布局表格</title>
<meta charset="utf-8" />
</head>
<body>
<table width="100%" bgcolor="#f2f2f2">
<tr height="80px"bgcolor="#14191e">
<td>1111</td>
</tr><!--页头-->
<tr height="10px">
<td></td>
</tr><!--上空行-->
<tr>
<td>
<table align="center" width="1024px">
<tr>
<td width="240px" valign="top" >
<table width="100%" bgcolor="#ffffff">
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
<tr><td align="center" height="60px">关于我们</td></tr>
</table>
</td><!--左内容-->
<td width="20px"> </td><!--空隙-->
<td width="764px" bgcolor="#ffffff">
<pre> <!--保持粘贴文字格式-->
什么是慕课(MOOC)
(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open
(大规模)Open:
(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open
</td><!--右内容-->
</tr>
</table>
</td>
</tr>
<tr height="10px">
<td></td>
</tr><!--下空行-->
<tr height="150px" bgcolor="#14191e">
<td>1111</td>
</tr><!--页脚-->
</table>
</body>
</html>
正在回答
你如果就想按照老师的代码走，需要你将<pre></pre>标签中的文字补充的跟老师的文字一样即可正确实现效果。如果你不想补充大段的文字，就需要将代码修改为如下格式：
还有一个问题会影响你的布局，也是导致你的排版跟老师不一样的原因之一，你的文字“ 什么是慕课(MOOC)”这行下面的“(大规模)Open”这行文字太长了，这就是表格独有的自适应的特性，即：即使设置了固定宽度，如果表格的内容宽度过宽还是会撑开表格的宽度的。针对以上问题，同学可以尝试将“ 什么是慕课(MOOC)”这行下面的“(大规模)Open”这行文字换行，如图：
祝学习愉快！
<!doctype html> <html> <head> <title>布局表格</title> <meta charset="utf-8" /> </head> <body> <table width="100%" bgcolor="#f2f2f2"> <tr height="80px"bgcolor="#14191e"> <td>1111</td> </tr><!--页头--> <tr height="10px"> <td></td> </tr><!--上空行--> <tr> <td> <table align="center" width="1024px"> <tr> <td width="240px" valign="top" > <table width="100%" bgcolor="#ffffff"> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> <tr><td align="center" height="60px">关于我们</td></tr> </table> </td><!--左内容--> <td width="20px"> </td><!--空隙--> <td width="764px" bgcolor="#ffffff"> <pre> <!--保持粘贴文字格式--> 什么是慕课(MOOC) (大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open (大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open (大规模)Open: (大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open(大规模)Open </td><!--右内容--> </tr> </table> </td> </tr> <tr height="10px"> <td></td> </tr><!--下空行--> <tr height="150px" bgcolor="#14191e"> <td>1111</td> </tr><!--页脚--> </table> </body> </html>
你还是按照老师的方法，将你pre标签中“什么是慕课(MOOC)”下面一行文字的折行显示吧！
另外，从你的问题上来看，同学对table表格的基础知识掌握的不够扎实哦，建议重新学习一下table表格的内容。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星