表格布局页面

最新推荐文章于 2023-06-08 17:08:22 发布
最新推荐文章于 2023-06-08 17:08:22 发布
阅读量1.4k 收藏 6
点赞数 1
文章标签： 表格布局页面 table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxh_gdmu/article/details/49306865
版权

本文用到了两个表格，一个是大表格，一个是内嵌在大表格里面的成绩排名表格

用绝对定位相对比较好控制布局！

效果图：

这里写图片描述

.html

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>表格布局</title>
<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
<table id="whole" cellspacing="2px" cellpadding="5px">//大表格，边框边距为2px，文字距离边框5px
<tr >
    <td id="img" colspan="8"></td>//第一行合并8列，放第一张图片
</tr>

<tr id="dao">
    <td>导航1</td>
    <td>导航2</td>
    <td>导航3</td>
    <td>导航4</td>
    <td>导航5</td>
    <td>导航6</td>
    <td>导航7</td>
    <td>导航8</td>
</tr>

<tr>
    <td id="left" colspan="2"></td>//第二行，合并前两列，放第二张图片
    <td id="right" colspan="6">//合并最后6列
        <table id="tb2" border="1px" cellpadding="1px" cellspacing="0px" bordercolor="#999999" >//内嵌表2,设置边框大小为1,
        文字与边框的距离1，边框间距，边框颜色
            <caption align="left"><font color="#FF0000" size="+2">学生成绩排名（由低到高）</font></caption>//标题
            <tr>&nbsp</tr>//空一行
            <tr bgcolor="#0066CC">//设置该行颜色
                <font color="#FFFFFF">
                <td>名次</td>
                <td>姓名</td>
                <td>学号</td>
                <td>英语成绩</td>
                <td>数学成绩</td>
                <td>语文成绩</td>
                <td>物理成绩</td>
                </font>
            </tr>
            <tr>
                <td>top10</td>
                <td>洪承畴</td>
                <td>1501</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
              <tr bgcolor="#999966">
                <td>top9</td>
                <td >刘基</td>
                <td>1502</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
            </tr>
            <tr>
                <td>top8</td>
                <td>赵普</td>
                <td>1503</td>
                <td>30</td>
                <td>30</td>
                <td>30</td>
                <td>30</td>
            </tr>
              <tr bgcolor="#999966">
                <td>top7</td>
                <td>魏徵</td>
                <td>1504</td>
                <td>40</td>
                <td>40</td>
                <td>40</td>
                <td>40</td>
            </tr>
             <tr>
                <td>top6</td>
                <td>诸葛亮</td>
                <td>1505</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
                <td>50</td>
            </tr>
               <tr bgcolor="#999966">
                <td>top5</td>
                <td>张良</td>
                <td>1506</td>
                <td>60</td>
                <td>60</td>
                <td>60</td>
                <td>60</td>
            </tr>
              <tr>
                <td>top4</td>
                <td>李斯</td>
                <td>1507</td>
                <td>70</td>
                <td>70</td>
                <td>70</td>
                <td>70</td>
            </tr>
             <tr bgcolor="#999966">
                <td>top3</td>
                <td >范蠡</td>
                <td>1508</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
             <tr>
                <td>top2</td>
                <td>管仲</td>
                <td>1509</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
             <tr bgcolor="#999966">
                <td>top1</td>
                <td >吕尚(姜子牙)</td>
                <td>1510</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </table>
    </td>
</tr>

<tr class="bottom" >
    <td colspan="8" id="bk">版权声明:<a href="http://blog.csdn.net/lxh_gdmu/article/details/49306865">来源桑海田</a></td>
</tr>
</table>
</body>
</html>

.css

@charset "gb2312";
/* CSS Document */
body{
    margin-top:0px;//贴紧上边
    margin-left:0px;//贴紧左边
    }
#whole{
    margin:0 auto;
    margin-left:0px;

    }

#img{
    background:url(img/head.jpg);
    width:1366px;
    height:100px;

    }

#dao{
     text-align:center;
     background:#666;
     color:#FFF;

    }

#left{
    background:url(img/left.jpg);
    width:340px;
    height:368px;
    position:absolute;//绝对定位
    left:0px;//前提要有position，距离左边的距离
    top:144px;//前提要有position，距离上边的距离
    color:#666;//边框颜色
    border:solid;//边框类型

    }
#right{
    background:#FFF;
    width:350px;
    height:360px;
    border:solid;
    color:#666;//边框颜色

    }

#tb2{
    position:absolute;
    left:570px;
    top:200px;
    text-align:center;//文本居中
    width:700px;
    color:#000;

    }

.bottom{
    background:#CCC;
    width:1290px;
    height:100px;
    text-align:center;
    }
#bk{
    color:#666;
    border:solid;
    cellspacing:0px;
    border-top:5px;
    }
a{text-decoration:none;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:#F00;}
3l-li
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table 单元格平均分配tr
天蓝蓝风轻轻
03-23 1万+
&lt;style&gt; table{ border-collapse: collapse; border-spacing: 0; table-layout: fixed; } &lt;/style&gt;table 单元格平均分配tr实现上面效果的方法，我们只需要为table指定table-layout: fixed属性即可w3c上对table-layout: fixed属性的说明    au...
jsp页面table表格上下左右居中
热门推荐
quge_name_harder的博客
09-30 2万+
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@taglib uri="/struts-tags" prefix="s"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio
css初入门：网页布局之网格布局-grid
lalala_dxf的博客
04-25 4819
网格列（Grid Columns）网格行（Grid Rows）网格间隙（Grid Gaps）通过以下属性来调整网格间隙。// 竖直间隙// 水平间隙// 是 row-gap 和column-gap 属性的简写属性列线与竖线列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。
C#中tableLayoutPanel1控件详细使用方法
xiaogongzhu001的博客
06-08 5220
C#中tableLayoutPanel1控件详细使用方法
TableLayout 表格布局
夏夜追凉丶的博客
03-06 259
表格布局
c#学习5布局框tablelayout
波波诸葛伟
09-29 510
https://www.bilibili.com/video/BV1zK4y1Y7tF?from=search&seid=17638832358180989717
应用表格布局管理器实现喜马拉雅的用户登录页面
最新发布
01-13
应用表格布局管理器实现喜马拉雅的用户登录页面 在 Android 开发中，表格布局管理器是一个非常重要的组件，它可以帮助我们快速地创建复杂的用户界面。在本实验中，我们将使用表格布局管理器来实现喜马拉雅的用户...
HTML表格布局实例讲解
12-13
主要原因是表格布局限制了灵活性，并可能导致内容在不同屏幕尺寸下的响应性表现不佳。现代Web开发更倾向于使用CSS布局技术，如Flexbox或Grid，来实现更灵活和可适应的页面结构。 不过，理解HTML表格布局仍然很重要...
Android开发之TableLayout表格布局
09-02
表格布局以行和列的形式管理其子视图，即`TableRow`对象或直接的`View`对象。每个`TableRow`代表一行，可以包含多个子视图，这些子视图在列中对齐。默认情况下，每个子视图会占据一列的宽度。 2. **TableLayout...
Android开发菜单布局之表格布局示例
08-26
例如，在一个静态菜单页面中，我们可以使用表格布局来创建一个菜单表格，每个菜单项占据一行，菜单项的名称和图标占据不同的列。 五、示例代码 以下是一个简单的表格布局示例代码： ```xml android:id="@+id/...
添加excel中的表格到布局窗口
12-15
iObject .NET范例实现将excel表格中的表格添加到布局。
WinForm下的表格控件ReoGrid2.0使用示例 开源免费表格控件
10-25
ReoGrid .NET Spreadsheet Component C# 和 VB.net 开源免费的表格控件, 界面很漂亮, 功能很强大 其它的自己搜一下吧，当前版本是2.0的使用示例
HTML表格布局
01-26
HTML表格布局是网页设计中一个基础且重要的部分，它用于组织和展示数据，如产品目录、数据统计或信息对比。在HTML中，我们使用`<table>`元素来创建表格，结合`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）等标签...
【HTML】-案例-利用表格制作网页
Liangqi0329的博客
09-29 1万+
在网页制作中，早期的网页比较喜欢用表格来进行页面布局，使得页面看上去也更整洁。在本文中，我们介绍的是一个用表格来布局的一个菜谱页面，效果如下： 可以看到，大体上，这是一个由五行三列的表格所构成的菜谱。所以，在初始设定时，我们可以把表格设成五行三列，然后再进行一些行和列的合并，就可以得到我们想要的效果。在本例中，我们将第一行的所有列合并，并将第一列的第二第三行合并，第一列的第四第五行合并。
Winform 表格布局
qq_45434201的博客
01-14 1952
表格布局，控件名TableLayoutPanel。 控件的每个单元格都可以用来放置其他控件。可以右键点击控件，选择行列值，来编辑行列的大小.也可以选择属性栏的Clounms编辑行列。 效果如图：
html表格布局方式有那几种,前端几种常见的布局方式
weixin_33420201的博客
06-10 1357
1.静态布局(固定宽高)2.弹性布局(flex)————常用3.圣杯布局flex：flex-group、flex-shrink、flex-basisflex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex...
第十讲 利用表格规划网页的布局
叫你不要乱扔东西
03-05 5313
我们在设计一个图文混排的网页或分栏的文字网页时，常常会感到文字及图片的定位不听使唤。利用表格的帮助，可以将它们按我们的需要放到任何位置。　　利用表格组织网页的内容，可以使网页更整洁美观。对于图文混排的网页，利用表格可以大大提高网页制作的效率。在隐藏表格框线后，浏览者几乎感受不到表格的存在。实际上FrontPage提供的各网页模板，就是用表格来组织的。一、几种典型的网页布局　　如果希望自己制作的网页
html网页 table布局实例,HTML用Table表格对网页布局
weixin_39928461的博客
06-10 4331
HTML是用于开发网页的“超文本标记语言”，今天我们一起来学习一下HTML+CSS网页布局中Table布局方式。常见的网页布局用CSS而言一般有经典行布局、经典列布局、双飞翼布局、圣杯布局等。今天小编教大家用Table表格布局。大家先来欣赏几个网页：这几个网页布局都挺好看的对吧，不过今天我们不深究网页如何做到那么好看，我们仅仅做网页如何布局。来看这张图：这个网页效果就是我们今天要做的。首先，我们仔...
C#reportviwer控件<转>
weixin_30654583的博客
10-30 319
C#报表控件ReportViewer的使用(转) 启动VS2005新建一个窗体项目，命名为TestProj 在左边的窗体内选择“添加新数据源”或在菜单上操作“添加新数据源”： 选择后出现对话窗体，选择“数据库”，进入“下一步”： 本数据源以SqlServer2000所提供的Northwind数据库为例，因此在数据库内选择驱动程序为SqlServer，具体操作视所用数据库而定...
用表格实现页面布局
05-29
表格可以用来实现网页布局，但不是最优的选择。...其次，表格布局缺乏灵活性，不适合响应式设计。最后，表格布局的性能可能不如其他布局方法。 因此，建议使用其他布局方法，如CSS布局，Flexbox和Grid布局等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值