html中table的设计

最新推荐文章于 2025-03-23 18:32:51 发布

Jerry_sss

最新推荐文章于 2025-03-23 18:32:51 发布

阅读量1.8k

点赞数

本文链接：https://blog.youkuaiyun.com/Aurora_sss/article/details/51705038

版权

死磕了一个网页出来，总结一下常用的知识点：

1.表格布局最好用百分比，自适应屏幕，只要确保百分比相加总数相等，上下表格就不会发生错位，也能保证页面放大缩小非常工整。

例子：

代码如下：

<!--第三个表-->
<table width="90%"  align="center" class="table1"  cellspacing="0" cellpadding="0">
	<td class="td2" width="8%" rowspan=4>实际监护情况</td>
	<td width="92%">
		<table width="100%" cellspacing="0" cellpadding="0">
		<!-- 第一行-->
			<tr>
				<td class="td1" width="15%">监护类型</td>
				<td class="td1" width="34%">
					<select style="width:50%; height:90%;">
							<option value="un">无人监护</option>
							<option value="yn">有人监护</option>
					</select></td> 
				<td class="td1" width="15%">监护情况</td>
				<td class="td3" width="28%">
					<select style="width:50%; height:90%;">
							<option value="good">监护情况较好</option>
							<option value="bad">监护情况不好</option>
					</select></td> 
			</tr> 
		</table> 
		<table width="100%" cellspacing="0" cellpadding="0">
			<!-- 第二行-->
			<tr>
				<td class="td2" width="15%">父母双方同时外出</td> 
				<td class="td2" width="17%">
					<select style="width:80%; height:90%;">
							<option value="yes">是</option>
							<option value="no">否</option>
					</select></td>
				<td class="td2" width="17%">父母一方外出而另一方无监护能力</td> 
				<td class="td2" width="15%">
					<select style="width:80%; height:90%;">
							<option value="yes">是</option>
							<option value="no">否</option>
					</select></td>
				<td class="td2" width="12%">无监护能力</td> 
				<td class="td2" width="16%">
					<select style="width:80%; height:90%;">
							<option value="father">父亲</option>
							<option value="mother">母亲</option>
					</select></td>
			</tr>
		</table>
	<!-- 第三行-->
	<table  width="100%" cellspacing="0" cellpadding="0">
		<tr>
			<td class="td2" width="15%">与亲朋好友监护人关系</td> 
			<td class="td2" width="12%"><input class="t1" type="textfield" style="width:80%; height:90%;border:0;"></td>
			<td class="td2" width="10%">亲朋监护人姓名</td> 
			<td class="td2" width="12%"><input class="t1" type="textfield" style="width:80%; height:90%;border:0;"></td>
			<td class="td2" width="10%">亲朋监护人电话</td> 
		  	<td class="td2" width="10%"><input class="t1" type="textfield" style="width:94%; height:100%;border:0;"></td>
			<td class="td2" width="10%">亲朋监护人身份证</td> 
		  	<td class="td2" width="13%"><input class="t1" type="textfield" style="width:94%; height:90%;border:0;"></td>
		</tr>
	</table>
	<table  width="100%" cellspacing="0" cellpadding="0">
	<!-- 第四行-->
		<tr>
			<td class="td2" width="27%">受委托监护人居住地地址</td>
			<td class="td2" width="65%"><input class="t1" type="textfield" style="width:99%; height:100%;border:0;"></td>
		</tr>
	</table>
	</td>
	</table>

2.为了代码的整洁，应该在css中统一控制表格，单元格的格式，只需引用class=""

3.实现这种效果，应当设置一个textfield，并设置border：0px即可，还可以根据需要设置四个边线。

上：border-top：1px solid #000000 表格常用黑实线

下：border-bottom：

左：border-left

右：border-right

4.实现一个table中每行中列的宽度不一样，应当在最外层的table中嵌入几个无边线的小table，然后在小table中通过百分数控制width,一个经常会用的的知识点。

<table>

</table1>

</table1>

</table>

5.文本框textfield中文字居中效果

.t1{
		 text-align:center;
		 line-height:45px;
	 	 height:45px;
		}

6.显示本地时间并进行刷新，可放置在网页顶部

<!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=gb2312" />
<title>兼容IE、FF的日期时间JS代码</title>
</head>
<body>
<span id=mytime></span>
<script type="text/javascript">
function showLocale(objD)
{
var str,colorhead,colorfoot;
var yy = objD.getYear();
if(yy<1900) yy = yy+1900;
var MM = objD.getMonth()+1;
if(MM<10) MM = '0' + MM;
var dd = objD.getDate();
if(dd<10) dd = '0' + dd;
var hh = objD.getHours();
if(hh<10) hh = '0' + hh;
var mm = objD.getMinutes();
if(mm<10) mm = '0' + mm;
var ss = objD.getSeconds();
if(ss<10) ss = '0' + ss;
var ww = objD.getDay();
if  (ww==0)  ww="星期日";
if  (ww==1)  ww="星期一";
if  (ww==2)  ww="星期二";
if  (ww==3)  ww="星期三";
if  (ww==4)  ww="星期四";
if  (ww==5)  ww="星期五";
if  (ww==6)  ww="星期六";
colorfoot="</font>"
str =yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "  " + ww;
return(str);
}
function tick()
{
var today;
today = new Date();
document.getElementById("mytime").innerHTML = showLocale(today);
window.setTimeout("tick()", 1000);
}
tick();
</script>
</body>
</html>l

效果如下：

7.浏览器不兼容问题

浏览器不兼容问题