如何把这个代码放到一个表中? [英] How to put this code into a table?

查看:159
本文介绍了如何把这个代码放到一个表中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的代码是:

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 Frameset / / EN
http://www.w3.org/TR/html4/frameset.dtd\">
< html>
< head>
< title>
Prueba
< / title>
< / head>
< frameset rows =56px,*,50pxborder =0framespacing =0frameborder =NO>
< frame class =headersrc =header.html>
< frameset cols =450px,*border =0framespacing =0frameborder =NO>
< frameset rows =*,150pxborder =0framespacing =0frameborder =NO>
< frame class =frame1scrolling =autosrc =search_results.html>
< frame class =frame2scrolling =nosrc =info.html>
< / frameset>
< frame class =frame3scrolling =nosrc =map.html>
< / frameset>
< frame class =footerscrolling =nosrc =footer.html>
< / frameset>
< / html>

我想删除所有框架并用表格重建它。我尝试了dosomething,但我没有得到我想要的结果。

解决方案

 <表> 
<!DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Frameset // EN
http://www.w3.org/TR/html4/frameset.dtd\">
< html>
< head>
< title>
Prueba
< / title>
< / head>
< frameset rows =56px,*,50pxborder =0framespacing =0frameborder =NO>
< frame class =headersrc =header.html>
< frameset cols =450px,*border =0framespacing =0frameborder =NO>
< frameset rows =*,150pxborder =0framespacing =0frameborder =NO>
< frame class =frame1scrolling =autosrc =search_results.html>
< frame class =frame2scrolling =nosrc =info.html>
< / frameset>
< frame class =frame3scrolling =nosrc =map.html>
< / frameset>
< frame class =footerscrolling =nosrc =footer.html>
< / frameset>
< / html>
< / table>

有。




但是很严肃。您不想使用表格进行布局。你也不应该使用框架。



要走的路是使用div。或者新的HTML5元素。



添加到HTML的一些新元素包括:元素元素元素




  • 部分

  • nav

  • 文章

  • 预留

  • hgroup

  • li>
  • 地址



分组元素





  • figcaption



不使用表格布局的一些好处:


  • 表格渲染速度较慢

  • 表格不包含使用流体设计时工作得很好

  • 表格不是用于布局的正确语义元素

  • 表格用于表格数据

  • 表格如果您想在某个时候更改布局,则表格并不十分灵活



请注意,你想使用新的HTML5元素,你应该设置正确的文档类型:

 <!DOCTYPE html> 

另外请注意,'旧'浏览器(和IE)不知道新元素。为了解决这个问题,你可以在文档的头部添加这个简单的JS脚本:

 < script> 
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');
< / script>






您会得到如下所示的内容:


$ b CSS

  #body {width:960px; } 
在旁{width:450px;向左飘浮; }
.content {margin-left:450px; }

HTML

 < div id =body> 
< header>
< h1>您的标题< / h1>
< / header>
<预计>
< p> Aside< / p>
< / aside>
< div class =content>
< h2>标题< / h2>
< p>一些文字< / p>
< / div>
< footer>
< p>您的页脚< / p>
< / footer>
< / div>

演示



http://jsfiddle.net/ZGPAW/


My code is this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>
            Prueba
        </title>
    </head>
    <frameset rows="56px, *, 50px" border="0" framespacing="0" frameborder="NO">
        <frame class="header" src="header.html">
        <frameset cols="450px, *" border="0" framespacing="0" frameborder="NO">
            <frameset rows="*,150px" border="0" framespacing="0" frameborder="NO">
                <frame class="frame1" scrolling="auto" src="search_results.html">
                <frame class="frame2" scrolling="no" src="info.html">
            </frameset>
            <frame class="frame3" scrolling="no" src="map.html">
        </frameset>
        <frame class="footer" scrolling="no" src="footer.html">
    </frameset>
</html>

I want to remove all frames and rebuild it with tables. I tried to dosomething, but I don't get the result that I want.

解决方案

<table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>
            Prueba
        </title>
    </head>
    <frameset rows="56px, *, 50px" border="0" framespacing="0" frameborder="NO">
        <frame class="header" src="header.html">
        <frameset cols="450px, *" border="0" framespacing="0" frameborder="NO">
            <frameset rows="*,150px" border="0" framespacing="0" frameborder="NO">
                <frame class="frame1" scrolling="auto" src="search_results.html">
                <frame class="frame2" scrolling="no" src="info.html">
            </frameset>
            <frame class="frame3" scrolling="no" src="map.html">
        </frameset>
        <frame class="footer" scrolling="no" src="footer.html">
    </frameset>
</html>
</table>

There.


But serious. You don't want to use tables for layouting. Neither should you use frames.

The way to go would be to use divs. Or the new HTML5 elements.

Some new elements added to HTML are:

Sections elements

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • address

Grouping elements

  • figure
  • figcaption

Some benefits when not using tables for your layout:

  • tables render slower
  • tables don't work too well when using a fluid design
  • tables are not the correct semantic elements to use for layout
  • tables are for tabular data
  • tables aren't really flexible if you want to change your layout at some point

Please note that when you want to use the new HTML5 elements you should set the correct doctype:

<!DOCTYPE html>

Also note that 'older' browser (and IE) don't know the new elements. To fix this issue you could add this simply JS script in the head of the document:

<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
  document.createElement('time');
</script>


What you would get is something like the following:

CSS

​#body { width: 960px; }
aside { width: 450px; float: left; }
.content { margin-left: 450px; }

HTML

<div id="body">
    <header>
        <h1>Your header</h1>
    </header>
    <aside>
        <p>Aside</p>
    </aside>
    <div class="content">
        <h2>Title</h2>
        <p>Some text</p>
    </div>    
    <footer>
        <p>Your footer</p>
    </footer>
</div>    ​

Demo

http://jsfiddle.net/ZGPAW/

这篇关于如何把这个代码放到一个表中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆