您的位置：首页 > 编程技术 > html  >  表格撑大 防止表格被撑破

表格撑大 防止表格被撑破

 更新时间：2016年9月20日 19:06  点击：1323

如何文字不会撑大表格, 表格撑大   撑破表格   css 撑破表格   防止表格被撑破 ,这要用到css里面的word-wrap: break-word

下面来看一个简单的例子吧.

<table width="100%" border="1">
<tr>
<td style="width: 200px; word-wrap: break-word">

www.111cn.netwww.111cn.netwww.111cn.netwww.111cn.netwww.111cn.netwww.111cn.netwww.111cn.netwww.111cn.net
</td>

</tr></table>

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，

或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息

、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面

效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下

面俺就带您剖析它的奥秘。
【1、最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascr

ipt">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用，在这

些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html

不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(..

/)均可。
用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</b

ody>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往

前放。

【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体

情况。

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,

left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n

o, status=no')
//写成一行
-->
</SCRIPT>

参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；


</SCRIPT> js脚本结束

【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=400, toolbar

=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")


//写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的页面内容...
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有

任何用途。
怎么调用呢？
方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href="#" onclick="openwin()">打开一个窗口</a>
注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
<input type="button" onclick="openwin()" value="打开窗口">

【4、同时弹出2个窗口】
对源代码稍微改动一下：
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("page.html", "newwindow", "height=100, width=100, top=0,

left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n

o, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=1

00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca

tion=no, status=no")
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可

。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。

OK？

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

如下代码加入主窗口<head>区：

<script language="javascript">
<!--
function openwin() {
window.open("page.html","","width=200,height=200")
}
//-->
</script>
加入<body>区：
<a href="1.htm" onclick="openwin()">open</a>即可。

【6、弹出的窗口之定时关闭控制】

下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段

代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则

...)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript">

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

</script>
然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BO

DY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗

口的代码，10秒钟后就自行关闭该窗口。)

【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵，现在更加完美了！

【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
通过下面的例子，你可以在一个页面内完成上面的效果。

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no

,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>

看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照

格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用

OpenWindow.document.close()结束啊。


【9、终极应用--弹出的窗口之Cookie控制】

回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定

没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，

那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
有解决的办法吗？Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面HTML的<HEAD>区：

<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}

</script>

然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）

替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进

入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

写到这里弹出窗口的制作和应用技巧基本上算是完成了

<Script Language=JavaScript RunAt=Server>
//===============================================
// 单个过滤
// 输入参数：
// s_Content : 要转换的数据字符串
// s_Filter : 要过滤掉的单个格式
//===============================================
function eWebEditor_DecodeFilter(html, filter){
 switch(filter.toUpperCase()){
 case "SCRIPT":  // 去除所有客户端脚本javascipt,vbscript,jscript,js,vbs,event,...
  html = eWebEditor_execRE("</?script[^>]*>", "", html);
  html = eWebEditor_execRE("(javascript|jscript|vbscript|vbs):", "$1：", html);
  html = eWebEditor_execRE("on(mouse|exit|error|click|key)", "<I>on$1</I>", html);
  html = eWebEditor_execRE("&#", "<I>&#</I>", html);
  break;
 case "TABLE":  // 去除表格<table><tr><td><th>
  html = eWebEditor_execRE("</?table[^>]*>", "", html);
  html = eWebEditor_execRE("</?tr[^>]*>", "", html);
  html = eWebEditor_execRE("</?th[^>]*>", "", html);
  html = eWebEditor_execRE("</?td[^>]*>", "", html);
  break;
 case "CLASS":  // 去除样式类class=""
  html = eWebEditor_execRE("(<[^>]+) class=[^ |^>]*([^>]*>)", "$1 $2", html) ;
  break;
 case "STYLE":  // 去除样式style=""
  html = eWebEditor_execRE("(<[^>]+) style=\"[^\"]*\"([^>]*>)", "$1 $2", html);
  break;
 case "XML":   // 去除XML<?xml>
  html = eWebEditor_execRE("<\\?xml[^>]*>", "", html);
  break;
 case "NAMESPACE": // 去除命名空间<o:p></o:p>
  html = eWebEditor_execRE("<\/?[a-z]+:[^>]*>", "", html);
  break;
 case "FONT":  // 去除字体<font></font>
  html = eWebEditor_execRE("</?font[^>]*>", "", html);
  break;
 case "MARQUEE":  // 去除字幕<marquee></marquee>
  html = eWebEditor_execRE("</?marquee[^>]*>", "", html);
  break;
 case "OBJECT":  // 去除对象<object><param><embed></object>
  html = eWebEditor_execRE("</?object[^>]*>", "", html);
  html = eWebEditor_execRE("</?param[^>]*>", "", html);
  html = eWebEditor_execRE("</?embed[^>]*>", "", html);
  break;
 default:
 }
 return html;
}

// ============================================
// 执行正则表达式替换
// ============================================
function eWebEditor_execRE(re, rp, content) {
 oReg = new RegExp(re, "ig");
 r = content.replace(oReg, rp);
 return r;
}

</Script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><!--文档类型-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><!--设置网页的文件编码-->
<meta http-equiv="expires" content="2007/10/18 18:00:00"><!--脱机浏览的过期时间-->
<meta http-equiv="pragma" content="no-cache"><!--禁止网页从缓存中读取-->
<meta http-equiv="Refresh" content="5;http://"><!--网页重新定向-->
<meta http-equiv="set-cookie" content="2007/10/18 18:00:00"><!--设置网页的cookie过期时间-->
<meta http-equiv="Window-target" content="_top"><!--设置网页中链接的目标窗口-->
<meta http-equiv="Page-Enter" content="revealTrans(duration=1000000,transition=50000000)"><!--设置网页的打开效果-->
<meta http-equiv="Page-Exit" content="revealTrans(duration=1000000,transition=50000000)"><!--设置网页的关闭效果-->
<meta name="keywords" content="overmind,zerg,protoss"><!--设置网页的关键字，搜索的时候优先！！！重要！！！ 该数据被搜索引擎编入索引-->
<meta name="description" content="哈哈哈哈哈"><!--插入描述 搜索时被搜索引擎编入索引-->
<title>标题一定不要少啊！对SEO很有用的！</title>
</head>
<body>
aaa
</body>
</html>

现在的个人站长依靠google广告，收入明显地比过去两年减少，从而不少站长都转向做英文站，以获得高额收入，对于新朋友来说，做英文站可不像脑中想象的那样简单，不是简单的把中文文字用yahoo翻译或者Goole翻译工具翻译下就可以了，你需要面对的还有很多，中国人做外国站，最主要的就是语言上的问题，建议大家做好站后先找个外国朋友看看再做下一步工作。不少朋友都说，做英文站的最大问题是域名和空间问题，这只是片面的，真正的问题是英文站的价值，在国外，只有有价值的网站他们才会游览，在他们眼中，访问时间就是金钱。这样，最大的问题也就出来了，怎样做才能获得更多的外国朋友来访问。(这就是我们中国人说的流量问题，有人说做英文站用中国流量，我告诉你，这样做可以，但你的广告费不会有明显的增多，只有外国的ip点击后获得的广告费才会高点)，通过这些天的学习，我就把自己的经验分享给大家吧，内容太多，我就把要点总结下吧：

Webjx.Com


　　第一：你的英文站必须有准确的制作策略。

网页教学网

　　英文站的设计和制作，必须符合外国人的风格、文化习惯和使用互联网搜索信息的方式，遵照他们的心理去制作，他们见面爱谈天气，你就制作关于天气的内容，切不要把中国的一套东西搬到外国，中国人上qq先问的就是男女，年龄……你不知，外国人最不喜欢别人打听他们的年龄。 网页教学网

　　第二：你的英文站必须能够赢得在互联网上的竞争。(针对企业网站和商务网站)


　　你的产品，各个国家都有可能在生产，都有可能通过网站来赢得潜在顾客。你的网站必须能在竞争中走在前面，要不，你的网站建立的意义就大打折扣。这里所说针对的是企业网站，对于个人网站就是多做国外稀少的类型，外国人对中国不了解，你就做中国武术，他一定不会做，这样你就少了不少竞争对手。

网页教学网

　　第三：你的英文站必须在搜索引擎上面能够被外国人搜索到。


　　如果你的站在Google，yahoo，msn里搜索不到，那是多么可怕的一件事情，自己的付出和投资就……所以，你必须优化，由于seo对我们中国人来说：网站的中文优化都很困难，更别提英文优化。我就介绍个笨方法吧，虽笨却很使用，到各大搜索引擎找到是以com结尾的域名进行提交，(当然，如果你对英文比较精通，顺便找找英国的Google和YaHoo提提交地址及英国常用的搜索引擎进行提交，以此类推，再找其它国家的搜索引擎进行提交)再就是聊天多用msn，多交一些外国朋友，向他们推荐你的网站，让他们帮你宣传，不过前提是你的网站不能太垃圾，这里的垃圾不是指采集站。游览国外论坛，网站留下自己的站址，类似的方法还有很多，我就不一一阐述了。

　　第四：你的英文站必须能帮助你实现自主管理。

　　这里所指的是经常更新，对于国外站，最不方便的就是网站的管理，由于语言上的障碍，我们往往不知道如何管理，这就要你多学习英文了，起码要懂得关于网站，网络常用的一些词汇，有做英文站打算的朋友现在就开始努力学习吧。 Webjx.Com

　　第五：英文创意设计和美工。 网页教学网

　　每个人都有自己的审美标准，能够适合中国人的网站美工不一定适合美国人、英国人或者澳大利亚人，何况美国人、英国人或者澳大利亚人尽管都说英语，审美标准也不同。必须多游览国外的网站，仿照他们的设计风格来满足大多数人来游览你的网站，虽然这做起来很困难，你要知道，一旦你成功了，所获得的回报也是不同凡响。

　　第六：域名空间的选择。

Webjx.Com

　　这是最后一点，也是本篇文章最不主要的一点，不少朋友不说也知道，做英文站最好用国际域名(com、net、org)至于用他们中的哪个这不重要，重要的是做好网站的内容，页面，设计出符合他们喜欢的网站，为读者提供由价值的东西。空间，最好用国外空间，在访问速度上有保证。

 

[!--infotagslink--]

相关文章

  • postgresql 实现多表关联删除

    这篇文章主要介绍了postgresql 实现多表关联删除操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-02

  • mysql的3种分表方案

    一、先说一下为什么要分表：当一张的数据达到几百万时，你查询一次所花的时间会变多，如果有联合查询的话，有可能会死在那儿了。分表的目的就在于此，减小数据库的负担，缩短查询时间。根据个人经验，mysql执行一个sql的过程如下：1...2014-05-31

  • java 画pdf用itext调整表格宽度、自定义各个列宽的方法

    这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • C#实现动态生成表格的方法

    这篇文章主要介绍了C#实现动态生成表格的方法,是C#程序设计中非常实用的技巧,需要的朋友可以参考下...2020-06-25

  • Element图表初始大小及窗口自适应实现

    这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框，内容为当前年份及前后50年，默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(...2014-05-31

  • Python 列表(List)的底层实现原理分析

    这篇文章主要介绍了Python 列表(List)的底层实现原理分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09

  • C#实现绘制面形图表的方法详解

    这篇文章主要介绍了C#实现绘制面形图表的方法,对于C#初学者很好的掌握C#图形绘制有一定的借鉴价值,需要的朋友可以参考下...2020-06-25

  • 基于c#实现的九九乘法表（简单实例）

    本文主要分享了基于c#实现的九九乘法表，代码简洁，需要的朋友可以参考下，希望对大家有所帮助...2020-06-25

  • PostgreSQL之分区表(partitioning)

    通过合理的设计，可以将选择一定的规则，将大表切分多个不重不漏的子表，这就是传说中的partitioning。比如，我们可以按时间切分，每天一张子表，比如我们可以按照某其他字段分割，总之了就是化整为零，提高查询的效能...2020-07-11

  • 基于postgresql数据库锁表问题的解决

    这篇文章主要介绍了基于postgresql数据库锁表问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-30

  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22

  • vbs 读写注册表之系统启动项添加与删除

    这篇文章主要介绍了vbs 读写注册表之系统启动项添加值,需要的朋友可以参考下...2020-06-30

  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08

  • JavaScript实现网页下拉列表的省市联动

    这篇文章主要为大家详细介绍了JavaScript实现网页下拉列表的省市联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-07

  • Vue 自适应高度表格的实现方法

    这篇文章主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-14

  • C#设置自定义文件图标实现双击启动(修改注册表)

    这篇文章介绍的是利用C#设置自定义文件图标，然后实现双击启动的功能，文章给出了示例代码，介绍的很详细，有需要的可以参考借鉴。...2020-06-25

  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-02

  • 如何使用RoughViz可视化Vue.js中的草绘图表

    这篇文章主要介绍了如何使用RoughViz可视化Vue.js中的草绘图表，帮助大家更好的理解和使用roughViz，感兴趣的朋友可以了解下...2021-01-31