How to put this code into a table? [closed]

試著忘記壹切 提交于 2019-12-13 10:15:30

问题


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.


回答1:


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




回答2:


You cannot replicate the functionality of frames using tables. If you have a reason to rebuild the site, it is best to start from scratch, including decisions on functionality, general layout, and server-side technology used.



来源:https://stackoverflow.com/questions/10589097/how-to-put-this-code-into-a-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!