html5 table 教程,html5 div布局与table布局详解

╰半夏微凉° 2022-10-06 10:48 188阅读 0赞

本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下

div布局：html+css实现简单布局。

\#container中height不能写成百分数，必须为具体高度。

div布局

body\{

margin:0;

padding:0;

\}

\#container\{

width:100%;

height:650px;

background-color: aqua;

\}

\#heading\{

width:100%;

height:10%;

background-color: azure;

\}

\#content-menu\{

width:30%;

height:80%;

background-color: chartreuse;

float:left;

\}

\#content-body\{

width:70%;

height:80%;

background-color: chocolate;

float:left;

\}

\#footer\{

width:100%;

height:10%;

background-color: darkgrey;

clear: both;

\}

头部

内容菜单

内容主体

底部

效果图：

![f2429c3593d1436bf1ff726f61cf68f2.png][]

table布局：

table布局

<table> 
 <tbody> 
  <tr> 
   <td colspan="3">这是头部</td> 
  </tr> 
  <tr> 
   <td>左菜单</td> 
   <td>内容</td> 
   <td>右菜单</td> 
  </tr> 
  <tr> 
   <td colspan="3">这是底部</td> 
  </tr> 
 </tbody> 
</table>

效果图：

![0b0b056118affea1ffe0a44506fdb0ba.png][]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[f2429c3593d1436bf1ff726f61cf68f2.png]: /images/20221005/4ac26857a82f4bde9b8d30d0c28a6c7a.png
[0b0b056118affea1ffe0a44506fdb0ba.png]: /images/20221005/7b2a09a095294e34bb16a93b9995ddaf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5基本布局

[![HTML5基本布局][HTML5]][HTML5_HTML5] HTML4布局 [![HTML5基本布局][HTML5 1]][HTML5_HTM

骑猪看日落/ 2023年10月16日 19:40/ 0 赞/ 15 阅读

相关 2017-12-04HTML table布局

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2023年06月11日 07:28/ 0 赞/ 1 阅读

相关 html5 table 教程,HTML <table> 标签 | w3cschool菜鸟教程

HTML 实例一个简单的 HTML 表格，包含两列两行： <table> <tbody> <tr> <th>Month</th> <th>Sa

╰+攻爆jí腚メ/ 2022年10月06日 10:48/ 0 赞/ 227 阅读

相关 html5 table 教程,html5 div布局与table布局详解

本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 \container中height不能写成

╰半夏微凉°/ 2022年10月06日 10:48/ 0 赞/ 189 阅读

相关 html5自动调整布局,HTML5教程移动端页面自适应布局详解

本篇教程探讨了HTML5教程移动端页面自适应布局详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。 < 在移动设备上进行网页的重构或开发

￡神魔★判官ぃ/ 2022年10月05日 12:57/ 0 赞/ 295 阅读

相关 04-HTML-加强-table布局

HTML的加强 1. <a ... target=""> ① \_self ② \_blank ③ \_parent ④ frame\_n

柔光的暖阳◎/ 2022年09月18日 01:56/ 0 赞/ 161 阅读

相关 html -- div table布局 -- 加布局简单例子

div布局，div.html： <!DOCTYPE html> <html> <head> <meta name="generat

快来打我*/ 2022年07月18日 00:25/ 0 赞/ 212 阅读

相关 HTML - 布局div

http://[blog.csdn.net/pipisorry/article/details/78929615][blog.csdn.net_pipisorry_articl

今天药忘吃喽~/ 2022年06月02日 01:28/ 0 赞/ 597 阅读

相关 HTML/CSS -- 利用table进行布局

cssTable布局：[table布局][table] 布局1：高度固定，左边宽度固定，右边自适应 ![20181228161132679.png][] <sty

亦凉/ 2022年04月10日 07:19/ 0 赞/ 427 阅读

相关 HTML 5 <table> 标签

定义和用法 `<table>` 标签定义 `HTML` 表格。一个简单的 `HTML` 表格包括 `table` 元素，一个或多个 `tr、th` 以及 `td` 元

客官°小女子只卖身不卖艺/ 2021年06月26日 16:06/ 0 赞/ 436 阅读