首页 > 其他分享 >html中使用table进行布局

html中使用table进行布局

时间:2023-02-20 12:55:19浏览次数:33  
标签:body 000000 布局 html position table

效果:

 

 代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
                margin: 0%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            td{
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>
        <table style="width: 100%;height: 100%;border-collapse: collapse;background-color: aqua">
            <tr style="height: 20%;">
                <td colspan="2">
                    
                </td>
            </tr>
            <tr>
                <td style="width: 20%;">            
                    
                </td>
                <td >    
                
                </td>
            </tr>
            <tr  style="height: 10%;">
                <td  colspan="2">
                    
                </td>
            </tr>
        </table>
    </body>
</html>

 

标签:body,000000,布局,html,position,table
From: https://www.cnblogs.com/lurenjia-bky/p/17136950.html

相关文章

  • 第一篇:前端基础之HTML
    前端简介什么是前端"""前端即网路前台部分,运行在pc端、移动端等浏览器上展现给用户浏览的网页任何与用户直接打交道的操作界面都可以称之为前端后端指的是与前端工程......
  • javaEE004.06 jQuery:需求练习:jQuery.html()有参取值无参赋值、val代表选中的意思例子、
    文章目录​​一、$("p").html​​​​二、val​​一、$(“p”).html$(“p”).html()有参是取值,无参是赋值这里就有点类似css的取值赋值,也是一个参数和两个参数的区别(一个参......
  • html引入js文件加 defer ,defer 什么作用
    在HTML中引入JavaScript文件时,可以使用defer属性,该属性可以推迟(defer)脚本的执行,即等到整个HTML文档解析完毕后才执行脚本。使用defer属性可以避免在解析HTML......
  • [jenkins] 展示HTML报告
         样式缺失,解决办法: https://blog.csdn.net/weixin_45878889/article/details/123919882如何让在jenkins上点击生成的测试报告和下载下来的样式是一样......
  • iptables简单配置
    1.什么是iptables?iptables是Linux防火墙工作在用户空间的管理工具,是netfilter/iptablesIP信息包过滤系统是一部分,用来设置、维护和检查Linux内核的IP数据包过......
  • html中的table标签和表单标签
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录其笔记以供他日回顾table标签视频链接表单标签视频链接table标签<html> <head> <titl......
  • html基础标签
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录其笔记以供他日回顾视频链接<html> <head> <title>这是我的第一个网页</title> <metac......
  • html基础介绍
    html基础介绍1、html结构<!DOCTYPEhtml> //声明为HTML5文档<htmllang="zh-CN"> //HTML页面的根节点 //lang=:"zh-CN"告诉浏览器,内容是中文的,无需翻译......
  • ElementUI-Table分页查询
    <!--搜索--><el-inputplaceholder="请输入商品名搜索"v-model="searchText"class="input-with-select"style="width:3......
  • NPOI给word中的表格table动态添加行,并保留表格样式 , 替换文字
    publicclassNPOIHelper{///<summary>///输出模板docx文档///</summary>///<paramname="tempFilePath">模板文件地......