[html]用div+table做方格

最新推荐文章于 2024-03-18 18:50:29 发布
最新推荐文章于 2024-03-18 18:50:29 发布
阅读量3.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AFer198215/article/details/9121377
版权

某日领导看上win8的界面风格，一指那谁： 我要这个。

于是。。。



<!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>
<style type="text/css">
.div1{
	width:100%;
	height:150px;
	border:1px solid #0099FF;
}

.div2{
	width:100%;
	height:72px;
	border:1px solid #0099FF;
}

.div3{
	width:100%;
	height:4px;
}
</style>
</head>

<body>
<table width="730px" align="center" >
<tr>
	<td width="25%"><div class="div1">1</div> </td>
	<td width="25%"><div class="div1">1</div> </td>
	<td width="25%"><div class="div1">1</div> </td>
	<td width="25%"><div class="div1">1</div> </td>
</tr>
<tr>
	<td>
	<div class="div2">2</div> 
	<div class="div3"> </div> 
	<div class="div2">2</div> 
	</td>
	<td><div class="div1">1</div> </td>
	<td>
	<div class="div2">2</div> 
	<div class="div3"> </div> 
	<div class="div2">2</div> 
	</td>
	<td><div class="div1">1</div> </td>
</tr>
<tr>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
</tr>
<tr>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
	<td><div class="div1">1</div> </td>
</tr>
</table>
</body>
</html>



当然你要以为只是这样，你就错了，最终是这样地：




<!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>

<script type="text/javascript">
//border:1px solid #CCCCCC;
</script>

<style type="text/css">
.div_1{
	width:99%;
	height:200px;
	
}

.div_11{
	width:99%;
	height:135px;	
}

.div_12{
	width:99%;
	height:65px;	
}

.div_2{
	width:100%;
}

.div_21{
	width:100%;
	border:1px solid #CCCCCC;
}
</style>
</head>

<body>
<table width="1024px" align="center" border="0">
<tr>
	<td><img src="images/top.JPG" width="1024px" /></td>
</tr>
<tr>
<td>
	<table width="100%" bgcolor="#CCCCCC">
	<tr>
		<td>今天是2013年6月18日</td>
		<td> </td>
		<td align="right">
		中石油北京分公司，王凡
		</td>
		<td align="right" width="15%">
		<font size="-1" color="#006699">[个人中心]</font>
		<font size="-1" color="#006699">[登出]</font>
		</td>
	</tr>	
	</table>
</td>
</tr>
</table>
<br/>

<table width="1024px" align="center" border="0">
<tr>
	<td width="48%">
	<fieldset>
	<legend><font color="#0099CC" size="-1">消息</font> </legend>	
	<div class="div_1">
	<table id="message" width="100%" border="0" align="center">    
	<tr>
		<td align="right"><font size="-1"><a href="111.html">[更多]</a></font></td>
	</tr>
	<tr>
		<td> </td>
	</tr>   
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>	
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>	
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>	
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>
	<tr>
		<td><div class="div_21">  </div></td>
	</tr>	
    </table>
	</div>
	<br/>
	<br/>
	</fieldset>	
	</td>
	<td> </td>
	<td width="48%">
	<fieldset>
	<legend><font color="#0099CC" size="-1">公告</font> </legend>	
	<div class="div_11">
	<table id="message" width="100%" border="0" align="center">    
	<tr>
		<td align="right"><font size="-1"><a href="111.html">[更多]</a></font></td>
	</tr>
	<tr>
		<td> </td>
	</tr>
	 
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>	
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>	
	<tr>
		<td><div class="div_21">1111 </div></td>
	</tr>		
    </table>
	</div>	
	</fieldset>
	<br/>
		
	<fieldset>
	<legend><font color="#0099CC" size="-1">统计</font> </legend>
	<div class="div_12">	
	<table width="90%" align="center" border="0">
	<tr>	
	<td> </td>
	</tr>
	<tr>	
	<td><font size="-1">当前在线操作员30人，点击<font color="#006699">查看</font></font></td>
	</tr>
	<tr>	
	<td><font size="-1">已接管资源800台，点击<font color="#006699">查看</font></font></td>
	</tr>
	</table>
	</div>
	</fieldset>
	</td>
</tr>

<tr>
	<td> </td>
	<td> </td>
	<td> </td>
</tr>

<tr>
	<td>
	<fieldset>
	<legend><font color="#0099CC" size="-1"> 常用操作</font> </legend>	
	<div class="div_1">
	<table width="100%" align="center">
	<tr>
		<td width="50%"> </td>		
		<td align="right">
		<font size="-1"><a href="111.html">[配置]</a></font>
		  
		<font size="-1"><a href="111.html">[更多]</a></font>
		</td>
	</tr>
		
	<tr>
		<td> </td>		
		<td> </td>
	</tr>	
	
	<tr>
		<td>
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21"> </div>
		</td>		
		<td>
		<div class="div_21"> </div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21"> </div>
		</td>		
		<td>
		<div class="div_21"> </div>
		</td>
	</tr>	
	</table>
	</div>
	<br/>
	<br/>
	</fieldset>
	</td>
	<td width="30px"> </td>
	
	<td>
	<fieldset>
	<legend><font color="#0099CC" size="-1"> 报表&视图</font> </legend>	
	<div class="div_1">
	<table width="100%" align="center">
	<tr>
		<td> </td>		
		<td align="right">		
		<font size="-1"><a href="111.html">[更多]</a></font>
		</td>
	</tr>
		
	<tr>
		<td> </td>		
		<td> </td>
	</tr>	
	
	<tr>
		<td width="50%">
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21">111</div>
		</td>		
		<td>
		<div class="div_21">111</div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21"> </div>
		</td>		
		<td>
		<div class="div_21"> </div>
		</td>
	</tr>
	<tr>
		<td>
		<div class="div_21"> </div>
		</td>		
		<td>
		<div class="div_21"> </div>
		</td>
	</tr>	
	</table>
	</div>
	<br/>
	<br/>
	</fieldset>
	</td>
</tr>
</table>
<br/>
<br/>
<br/>
</body>
</html>




想喝咖啡的貓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端开发常用的几个js效果
csdn_chenli
05-26 3265
web前端开发常用的几个js 一.table换行奇数和偶数行不同的颜色 二.input type=“text” 文本里面的默认字体颜色和获取焦点后的字体颜色变换 三.iframe 自适应调用页面的宽度和高度 源代码： 实例1table换行奇数和偶数行不同的颜色     function load()             {                
使用div实现table效果
weixin_30444105的博客
04-05 1549
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用<table> HTM...
div+css实现两列table效果示例
12-13
css 复制代码代码如下:.mycode{ margin-top:20px; padding-right:200px ; padding-left:50px; float:left; display:inline}.mycode ul{ width:500px; height:300px } .mycode li{ width:200px; float:left; height:30px; list-style:none} .mycode li p{text-align:right; margin-top:0px} </p> <p> .sheng{ color:#F05D
html正方形边框，详解HTML设置边框的三种方式（html画方框用border）
热门推荐
H1453571548的博客
09-02 1万+
1、正方形边框[分别是上---左右---下边框设置] 2、正方形边框[分别是上下---左右边框设置] 3、正方形边框[边框的粗细、边框样式、边框颜色] 4、正方形边框[分别是上---右---左---下边框设置]
html画table表格
qq_45991812的博客
06-14 420
html画table表格：代码+实现效果
使用div制作表格效果
GTC的博客
10-24 4018
使用div制作表格效果
html css div开发table表格
bluemengcom的博客
06-11 1192
html css div开发类似table表格
div+css table布局实现代码
09-27
【div+css table布局实现代码】是一个关于使用CSS模拟HTML表格布局的技术，目的是为了在不使用`<table>`标签的情况下，实现多个容器等高并排显示的效果。这种布局方式常见于网页设计，允许内容在各自容器中居中或...
html+div+css+js学习.zip
01-01
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
Div+CSS对HTML的table表格定位用法实例
09-24
主要介绍了Div+CSS对HTML的table表格定位用法实例,文中讲到了CSS的定位差异问题需要的朋友可以参考下
使用原生div制作table表格
兔子的博客
12-02 2168
在移动使用横屏表格功能，横屏后无法实现同向滚动功能，此时使用div制作table，实现容器内的滚动
DIV 实现表格布局
08-14
不用到table标签也能实现 table功能。
HTML学习之路-03HTML表格、table布局
weixin_63204687的博客
08-20 3391
使用传统布局的案例以及相关知识
前端开发之div实现table表格系列教程一：创建表格
gz_gy的专栏
08-20 1863
查看效果 <style> #table1{ width:613px; } .kui-table { border: 1px dotted #ccc; } .kui-table .kui-td { height:32px; line-height:32px; font-size: 12px; border-color: #ccc; border-style: dotted; border-width: 0 0 1px 1px;
HTML表格（HTML 表格的使用，收藏这一篇就够了）
最新发布
u013179804的博客
03-18 1万+
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。今天聊聊 table。HTML元素用于创建表格，它是一种将数据按行和列组织排列的结构，用于在网页中呈现复杂的数据集。HTML 表格具有以下 2 种主要用途：1、最常见的用途是以表格形式展示数据，如产品价格、学生成绩、电影时间表等。表格可以清晰地展示数据的结构和关系。2、表格可以用于创建网页表单，通过在表格单元格中放置表单控件（如文本框、复选框、下拉菜单等），用户可以方便地输入数据。
div 实现table 表格自适应
weixin_45796807的博客
01-29 1199
1、实现样式，自适应跟随浏览器拖动缩放 1、template 模板 <template> <div> <a-tabs default-active-key="1" @change="callback"> <a-tab-pane v-for="(item, index) in dataListTitle" :key="index" :tab="item.alias" >
用DIV轻松实现自适应Table
chezaotu5026的博客
11-13 588
<body> <div style="display:table;border:1px red solid;width:100%;"> <div style="display:table-caption;text-align:center;">My...
html网格布局
yjnlovepy的博客
01-28 1424
html网格布局
DIV+CSS有利学习资源
08-11
本资源摘要信息将详细讲解DIV+CSS的基础知识和高级应用，帮助读者更好地理解DIV+CSS的使用方法和技巧。 **DIV+CSS基础知识** 在学习DIV+CSS之前，我们需要了解什么是DIV+CSS。DIV是HTML中的一个标签，用于定义网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值