如何将此代码放入表中?

Gar*_*778 -8 html frameset frame

我的代码是这样的:

<!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>
Run Code Online (Sandbox Code Playgroud)

我想删除所有帧并使用表重建它.我尝试了一些东西,但我没有得到我想要的结果.

Pee*_*Haa 6

<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>
Run Code Online (Sandbox Code Playgroud)

那里.


但是认真的.您不希望使用表格进行布局.你也不应该使用框架.

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

添加到HTML的一些新元素是:

部分元素

  • 部分
  • 导航
  • 文章
  • 在旁边
  • hgroup
  • 页脚
  • 地址

分组元素

  • 数字
  • figcaption

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

  • 表渲染速度较慢
  • 使用流体设计时,桌子不能很好地工作
  • 表格不是用于布局的正确语义元素
  • 表格用于表格数据
  • 如果您想在某些时候更改布局,那么表格并不是非常灵活

请注意,当您想要使用新的HTML5元素时,您应该设置正确的doctype:

<!DOCTYPE html>
Run Code Online (Sandbox Code Playgroud)

另请注意,"较旧"的浏览器(和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>
Run Code Online (Sandbox Code Playgroud)

你会得到的是如下:

CSS

?#body { width: 960px; }
aside { width: 450px; float: left; }
.content { margin-left: 450px; }
Run Code Online (Sandbox Code Playgroud)

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>    ?
Run Code Online (Sandbox Code Playgroud)

演示

http://jsfiddle.net/ZGPAW/

  • 哈哈哈.史诗般的答案. (5认同)