HTML表格布局

最新推荐文章于 2023-10-09 09:49:31 发布

Nikola desian

最新推荐文章于 2023-10-09 09:49:31 发布

阅读量3.5k

点赞数 5

分类专栏：网页设计文章标签： HTML 表格布局

本文链接：https://blog.csdn.net/weixin_41887615/article/details/84782584

版权

网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML表格布局
表格布局简单有层次感：只需表格标签就能实现
二话不说直接上代码和效果图：
效果图：

无标题文档

网站logo

网页的头

标题栏

页面其他内容

中间内容

右边内容

底部

布局代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body bgcolor="ffffff" text="#000000">

<table width="95%"  height="100%" border="1" cellpadding="1" cellspacing="1" align="center">
<tr height="10%">
	<td width="100" height="69">网站logo</td>
    <td colspan="2" align="center">网页的头</td>
</tr>
<tr height="80%">
	<td height="100%" width="20%">
   	  <table width="100%" height="848" border="1" cellpadding="1" align="center" cellspacing="1" bgcolor="#33FF00">
        	<tr><td width="100%"> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr><td> 标题栏 </td></tr>
            <tr> <td height="462" align="center" bgcolor="#FF0000"> 页面其他内容</td> 
          </tr>
      </table>
    </td>
     <td width="50%">
     	<table width="100%" height="846" border="1" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF">
        	<tr><td align="center"> 中间内容 </td> </tr>
            <tr> <td align="center"> 中间内容 </td> 
          </tr>
        </table>
    </td>
     <td width="30%">
     	<table width="100%" height="846" border="1" cellpadding="1" cellspacing="1">
     		<tr><td height="20%" align="center"> 右边内容 </td></tr>
        	<tr><td height="30%" align="center"> 右边内容</td></tr>
        	<tr><td height="50%" align="center"> 右边内容 </td></tr>
        </table>
    </td>
</tr>
<tr >
	<td height="70" align="center" colspan="3"> 底部</td>
</tr>
</table>
</body>
</html>