精华内容
下载资源
问答
  • 第3章 使用表格布局页面 第3章 使用表格布局页面 学习目标 学习目标 能够插入表格会使用属性面板和菜单对表格进行设定和编辑 能够插入表格会使用属性面板和菜单对表格进行设定和编辑 能够运用表格及表格的嵌套和叠加...
  • 表格布局页面

    千次阅读 2015-10-21 16:57:06
    本文用到了两个表格,一个是大表格,一个是内嵌在大表格里面的成绩排名表格绝对定位相对比较好控制布局!... 表格布局 <link rel="stylesheet" href="style.css" type="text/css"></head><body

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

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

    效果图:

    这里写图片描述

    .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;}
    
    
    
    
    
    
    展开全文
  • 使用表格布局网页》由会员分享,可在线阅读,更多相关《使用表格布局网页(20页珍藏版)》请在人人文库网上搜索。1、LOGO 第第5章章 使用表格布局网页使用表格布局网页 参考资源: v大学计算机 主要内容主要内容 v1 ...

    《使用表格布局网页》由会员分享,可在线阅读,更多相关《使用表格布局网页(20页珍藏版)》请在人人文库网上搜索。

    1、LOGO 第第5章章 使用表格布局网页使用表格布局网页 参考资源: v大学计算机 主要内容主要内容 v1 1创建表格;创建表格; v2 2编辑表格;编辑表格; v3 3讨论;讨论; v4 4格式化表格;格式化表格; v5 5制作个人简历页面;制作个人简历页面; v6 6总结并布置作业。总结并布置作业。 2021-7-13广东金融学院2 1创建表格创建表格 v认识表格认识表格 2021-7-13广东金融学院3 表格的行表格的列单元格合并后的单元格表格控制点 1创建表格创建表格 v新建表格新建表格 2021-7-13广东金融学院4 序号序号 行数行数 列数列数列宽(单位)列宽(单位)边框粗细边框粗。

    2、细 单元格边距单元格边距 单元格间距单元格间距 183400(像素)124 256100(百分比)200 346100(百分比)020 1创建表格创建表格 v新建表格新建表格 2021-7-13广东金融学院5 1创建表格创建表格 v表格样式总结表格样式总结 1) 1) 像素和百分比的不同,给新建的表格带像素和百分比的不同,给新建的表格带 来的差异。来的差异。 2) 2) 边框粗细的外观,强调边框粗细取边框粗细的外观,强调边框粗细取0 0时,时, 在浏览器中的显示效果。在浏览器中的显示效果。 3) 3) 单元格边距和单元格间距的含义。单元格边距和单元格间距的含义。 2021-7-13广东金融学院。

    3、6 2编辑表格编辑表格 v表格的主要编辑操作表格的主要编辑操作 选中选中 调整大小(包括行高和列宽)调整大小(包括行高和列宽) 行和列的增加和删除行和列的增加和删除 单元格合并单元格合并 拆分拆分 表格的嵌套表格的嵌套 2021-7-13广东金融学院7 2编辑表格编辑表格 v表格的编辑实例表格的编辑实例 2021-7-13广东金融学院8 3讨论讨论 v表格制作思路讨论表格制作思路讨论 只使用合并,不使用拆分和嵌套方法,只使用合并,不使用拆分和嵌套方法, 如何制作上述表格?如何制作上述表格? 只使用拆分,不使用合并和嵌套方法,只使用拆分,不使用合并和嵌套方法, 如何制作上述表格?如何制作上述表格。

    4、? 只使用嵌套,不使用合并和拆分方法,只使用嵌套,不使用合并和拆分方法, 如何制作上述表格?如何制作上述表格? 2021-7-13广东金融学院9 3讨论讨论 v只使用合并只使用合并 需要在制作表格之前计算整个表格的最大行需要在制作表格之前计算整个表格的最大行 数和最大列数,并以这两个值决定新建表格数和最大列数,并以这两个值决定新建表格 的行数和列数,最后,再使用合并方法得到的行数和列数,最后,再使用合并方法得到 所需的表格样式。所需的表格样式。 优点:直观,容易掌握。优点:直观,容易掌握。 缺点:需要事先计算表格的行数和列数;对缺点:需要事先计算表格的行数和列数;对 于复杂的表格实现比较繁锁;。

    5、后期修改麻烦于复杂的表格实现比较繁锁;后期修改麻烦 。 2021-7-13广东金融学院10 3讨论讨论 v只使用拆分只使用拆分 需要在制作表格之前计算整个表格的最小行需要在制作表格之前计算整个表格的最小行 数和最小列数,并以这两个值决定新建表格数和最小列数,并以这两个值决定新建表格 的行数和列数,最后,再使用拆分方法得到的行数和列数,最后,再使用拆分方法得到 所需的表格样式。所需的表格样式。 优点:操作方法单一、容易掌握。优点:操作方法单一、容易掌握。 缺点:第缺点:第1 1种方法的缺点同样存在。种方法的缺点同样存在。 2021-7-13广东金融学院11 3讨论讨论 v只使用嵌套只使用嵌套 需。

    6、要先确定表格的大体结构,并以此生成表需要先确定表格的大体结构,并以此生成表 格的整体架构,然后在需要细分的单元格中格的整体架构,然后在需要细分的单元格中 再进一步嵌套表格。视表格的复杂程度,这再进一步嵌套表格。视表格的复杂程度,这 种嵌套的层次可以是多层。种嵌套的层次可以是多层。 优点:制作速度快,容易后期再修改。优点:制作速度快,容易后期再修改。 缺点:太多的嵌套层次,将延长浏览器的显缺点:太多的嵌套层次,将延长浏览器的显 示时间。示时间。 2021-7-13广东金融学院12 3讨论讨论 v一种可行的方案一种可行的方案 视表格结构而定,综合合并、拆分和嵌套三视表格结构而定,综合合并、拆分和嵌。

    7、套三 种方法的优点,以嵌套方式为主,再配以合种方法的优点,以嵌套方式为主,再配以合 并和拆分操作。并和拆分操作。 2021-7-13广东金融学院13 表格嵌套区域 单元格合并区域 单元格拆分区域 4格式化表格格式化表格 v常见的表格格式化操作常见的表格格式化操作 表格格式化表格格式化 单元格(或单元格区域格式化)单元格(或单元格区域格式化) 单元格中文本的格式单元格中文本的格式 2021-7-13广东金融学院14 4格式化表格格式化表格 v表格格式化实例表格格式化实例 5制作个人简历页面制作个人简历页面 v最终效果最终效果 2021-7-13广东金融学院16 5制作个人简历页面制作个人简历页面。

    8、 v实例总结实例总结 1) 1) 表格布局技巧表格布局技巧 2) 2) 表格编辑技巧表格编辑技巧 3) 3) 表格格式化技巧表格格式化技巧 2021-7-13广东金融学院17 6总结并布置作业总结并布置作业 v(1) (1) 总结总结 1) 1) 新建表格及单位(即像素和百分比)使新建表格及单位(即像素和百分比)使 用。用。 2) 2) 表格编辑操作表格编辑操作 3) 3) 表格格式化操作表格格式化操作 4) 4) 使用表格布局网页的方法和技巧使用表格布局网页的方法和技巧 2021-7-13广东金融学院18 6总结并布置作业总结并布置作业 v(2) (2) 作业作业 v1 1下载下载“中国教育和科研计算机网中国教育和科研计算机网”主主 页(页( :/edu / :/edu /),使用),使用Dreamweaver 8Dreamweaver 8 分析它的表格结构。分析它的表格结构。 v2 2设计一个班级主页的页面结构,并指设计一个班级主页的页面结构,并指 出单元格中将放置什么内容。出单元格中将放置什么内容。 2021-7-13广东金融学院19 LOGO gduf.edu。

    展开全文
  • 1 浏览器:接受浏览者的操作,然后帮浏览者去web服务器请求网页内容,然后展现成人人眼能够看得懂的可视化页面的软件。2 IE是浏览器的一种。《ietest工具》3 Trident引擎是IE的WebBrowser控件;WebKit引擎4 静态页面...

    1         浏览器:接受浏览者的操作,然后帮浏览者去web服务器请求网页内容,然后展现成人人眼能够看得懂的可视化页面的软件。

    2         IE是浏览器的一种。《ietest工具》

    3         Trident引擎是IE的WebBrowser控件;WebKit引擎

    4         静态页面,动态页面

    5         Html和XML的联系,区别:html中有些标签不关闭:如
    ,这是与xml不同的地方

    <小于号;>大于号; 空格;

    6         Html中不把””当成空格,用 

    表格布局
    list_bg.gif
    全选商品图片商品名称/出售者/联系方式价格
    list0.jpg

    杜比环绕,家庭影院,超真是享受

    出售者:ling12233

    online_pic.giflist_tool_fav1.gif收藏

    一口价

    2833.0

    list1.jpg

    不容错过

    出售者:110

    online_pic.giflist_tool_fav1.gif收藏

    一口价

    2460.0

    list2.jpg

    精品热卖

    出售者:阳光的挣扎

    online_pic.giflist_tool_fav1.gif收藏

    一口价

    18880.0

    展开全文
  • 首先来看一下表格布局几个常用的属性: android:shrinkColumns设置可收缩的列,内容过多就收缩显示到第二行 android:stretchColumns设置可伸展的列,将空白区域填充满整个列 android:collapseColumns设置要隐藏的列...

    首先来看一下表格布局几个常用的属性:

    • android:shrinkColumns设置可收缩的列,内容过多就收缩显示到第二行
    • android:stretchColumns设置可伸展的列,将空白区域填充满整个列
    • android:collapseColumns设置要隐藏的列

    列的索引从0开始,通过TableRow确定行,TableRow中的组件数量为列数

    来看一下实例

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.tablelayout_login.MainActivity"
        android:stretchColumns="0,3"
        >
        <!--  android:stretchColumns="0,3"  设置第一列第四列可拉伸  -->
        <!--四行四列,其中第一列和第四列为空,设置为可拉伸以保证登录主界面处于界面中间位置-->
        <TableRow>
            <TextView /><!--  第一列空没有内容   -->
            <TextView
                android:text="用户名:"
                android:layout_gravity="center_horizontal"
                android:paddingTop="12dp"
                android:textSize="20sp"
              />
            <EditText android:hint="邮箱或者手机号"
                android:textSize="20sp" />
            <TextView /><!--  第四列空没有内容   -->
        </TableRow>
        <TableRow>
            <TextView />
            <TextView
                android:text="密码:"
                android:layout_gravity="center_horizontal"
                android:paddingTop="12dp"
                android:textSize="20sp"
                />
            <EditText android:hint="输入6-16位字母或数字"
                android:textSize="20sp"
                android:paddingRight="10dp" />
            <TextView />
        </TableRow>
        <TableRow>
            <TextView />
            <Button
                android:text="注册"
                android:layout_gravity="center_horizontal"
                android:paddingTop="12dp"
                android:textSize="20sp"
                />
            <Button
                android:text="登录"
                android:background="#ff8526"
                android:paddingTop="12dp"
                android:textSize="20sp"
                />
            <TextView />
        </TableRow>
        <TableRow>
            <TextView />
            <TextView />
            <TextView
                android:text="忘记密码?"
                android:paddingLeft="135dp"
                android:paddingTop="12dp"
                android:textColor="#ff8526"
                android:textSize="15sp"
                />
            <TextView />
        </TableRow>
    </TableLayout>
    

    结果如图
    两端空白区域即第一列与第四列可拉伸可以使第二列第三列始终保持居中

    在这里插入图片描述

    展开全文
  • 这次给大家带来HTML的...但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 或 表格()来布局 Web 页面的内容。使用表格...
  • 表格布局网页

    2018-10-07 17:23:10
    表格布局网页实例 Dreamweaver8表格进行页面布局本文介绍如何在 Macromedia Dreamweaver 8 中创建基于表格的页面布局。页面布局将确定您的页面在浏览器中会如何显示例如,显示菜单、图像和 Macromedia Flash 内容...
  • 以EXCEL为例,表格布局就是在网页设计中布局模式下的表格,在网页设计中可以布局模式来先确定大体的页面效果,而布局表格就是在布局模式下面往里面插入的表格了。Microsoft Excel是Microsoft为使用Windows和Apple ...
  • dream表格布局

    2011-11-29 18:51:09
    Dreamweaver第三部分 页面布局 第7章 表格页面布局 使用表格显示内容 使用布局模式布局 使用CSS布局 使用框架布局 使用布局(补充)
  • 用表格页面布局 具体思路入下: 声明一个表格,可以理解为整个页面就是一个大表格,这个大表格只起到分割页面的作用什么也不显示出来,再定义表格宽高,要把border(表格的边框)、cellpadding(内容与边框的距离)、...
  • 防采集标记:亢少军老师的课程和资料 import 'package:flutter/material.dart'; void main() { ... title: 'Table表格布局示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @...
  • 表格布局用TableLayout标记定义,在表格布局中,TableRow来标记,每个TableRow占用一行 TableLayout支持的属性 属性 作用 android:collapseColums 设置需要被隐藏的列序号(序号从0开始),多个列序号之间...
  • HTML表格布局

    千次阅读 2018-12-04 08:48:27
    表格布局简单有层次感:只需表格标签就能实现 二话不说直接上代码和效果图: 效果图: 无标题文档 网站logo 网页的头 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 ...
  • Dreamweaver8表格进行页面布局
  • 表格布局

    2015-12-15 11:16:14
    对于一些要 用到表格布局页面,若执行缩放,则在Firefox下与ie下显示是正常的,但是在Chrome下的90%点缩放下,td 与插入元素之间产生了1px左右的间隙,且无法消去。 当然有探索过解决方案,但是没有什么效果,
  • 在DIV+CSS布局出现前,基本上所用的网站都使用table来进行布局。因为table布局很简单,但是table布局不灵活且代码很多。下面将介绍怎样使用table来进行布局。实例:我们来布局一个常见网站后台程序的架构。布局图...
  • html表格布局实例[html]表格布局之实例版| [<>]前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。?例如:我们做一个简单的网站布局,代码如下:网站名称网站标题搜索框...
  • HTML——使用表格进行页面布局

    万次阅读 2014-10-23 18:40:48
    简单的使用表格进行布局~
  • 网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长史...
  • TabLayout表格布局

    2020-05-08 03:16:37
    常跟ViewPager等些控件一起使用来实现选项卡切换页面功能! 一、TableLayout概念: TableLayout (表格布局)采用行、列的形式来管理控件,它不需要明确声明包含多少行、多列,而是通过在TableLayout布局中添加Table...
  • 北大青鸟品红网站静态页面DIV+CSS+表格布局,Js特效
  • HTML表格布局实例讲解

    2020-12-13 22:17:22
    但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格()来布局 Web 页面的内容。 使用表格进行布局,是...
  • 本文实例讲述了Android开发菜单布局之表格布局。分享给大家供大家参考,具体如下: 多用于静态菜单页面 xml代码 代码内带详细解释 <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=...
  • 信息是从数据库读的 但是它直接变到下面去了 要怎么改才能让信息左右对应![图片说明](https://img-ask.csdn.net/upload/201707/27/1501138539_600426.png)![图片说明]...
  • html-table-for-network 滨江雨网是静态html网站做的,所有页面都采用表格布局。 它与文本、段落、图像、表格嵌套、页面之间的链接相关,是html的练习。
  • 绝对布局(Absolute Layout)就是指定元素的position属性为absloute,元素被指定为绝对定位后,浏览器会将其从流中删除。
  • 请简单说明表格布局网页和DIV+CSS布局网页的不同之处?请简单说明表格布局网页和DIV+CSS布局网页的不同之处?div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好TABLE表格布局。 有甚者优点:布局容易、...
  • 多用于静态菜单页面 xml代码 代码内带详细解释 &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;LinearLayout xmlns:android=&quot;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,557
精华内容 29,022
关键字:

如何用表格布局页面