`
webcode
  • 浏览: 6065972 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

11月10日表格细线与标签文件(tag文件)培训日记

阅读更多

首先解决昨天遇到的表格细线的问题,在明白解决方案的原理之前,学员们要扭转观念:HTML的表格与我们通常看到的表格不一样,一个大框里面套各种小单元格。
<table>的border是指整个表格的外边框的宽度,但是,只有设置了border的值,内部单元格才有边框,且无论boder的值是多少,内部单元格的边框宽度总为1。
<table border=1 bordercolor=green bgcolor="red" cellspacing=10 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>

<table border=10 bordercolor=green bgcolor="red" cellspacing=10 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>

<table border=0 bordercolor=green bgcolor="red" cellspacing=10 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
下面的表格的内外边框的宽度都是1+1=2。因为cellspacing=0,相当于两个单元格的边框挨在一起。
<table border=1 bordercolor=green bgcolor="red" cellspacing=0 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
要想让表格的内外边框的宽度是1,按如下方式实现:
<table border=0 bgcolor="green" cellspacing=1 cellpadding=5>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>
表格中嵌套表格的代码,且所有边界都显示为细线:
<table border=1 bordercolor=green bgcolor="green" cellspacing=0 cellpadding=0 style="border-collapse: collapse">
<tr bgcolor="red"><td>
<table border=1 bordercolor=green bgcolor="red" cellspacing=0 cellpadding=5 style="border-collapse: collapse" frame=void>
<tr><td>AAA</td><td>BB</td></tr>
<tr><td>CC</td><td>DD</td></tr>
</table>
</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
<tr bgcolor="red"><td>a</td><td>b</td><td>c</td></tr>
</table>

杨松实验:将边框的明色(bordercolorlight)或暗色(bordercolordark)设置为与背景颜色一样,也可以显示出较细的边框颜色。


接着回顾了一下昨天编写的文件上传组件的例子,根据例子中的代码为大家讲解了访问者(Visitor)设计模式:统计全班同学的总体重,
画了n个学生,再画一个Visitor对象,Visitor对象有个add(weight)方法,Student对象有个accept(Visitor)方法
accept(Visitor){Vistor.add(this.weight);}

接着为大家介绍一个了开发技巧:怎样在myclipse中修改Servlet程序后,不用重新部署到tomcat中,就可以用浏览器直接访问到修改后的Servlet程序。先采用配置<Context>元素的方式,然后用修改conf/context.xml文件的方式。

下午为大家讲解标签文件(tag文件),tag文件的工作原理,一些学员对tag文件的理解有些困难,我让他们简单地记住几个事情:1.jsp页面中的标签调用部分将被标签输出的结果所替代,2.标签可以向各种域范围中存储属性,JSP页面可以获得这些属性,标签体在执行时也可以获得这些属性,3.标签可以为JSP页面定义一些变量,并为通过域属性为这些变量赋值。

接着讲解了专用于tag文件的<%@ attribute %>和<%@ variable %>指令,讲解tag文件中的<jsp:doBody>标签的作用:jsp页面把标签体内容给了标签,标签是否输出标签体内容,这是标签的自由。讲课时先不调用<jsp:doBody>,将看到没有输出标签体的效果,接着调用<jsp:doBody>,将看到输出标签体的效果,再循环调用调用<jsp:doBody>,将看到标签体输出多次的效果。问题:那如何象简单标签那样修改标签体的内容后再输出呢?估计是用<jsp:invoke>。

分享到:
评论

相关推荐

    html中细线表格的做法

    在第一种方法中,我们使用table标签的border、cellpadding和cellspacing属性来实现细线表格。下面是相关的代码: ```html &lt;td bgcolor="#FFFFFF"&gt;&nbsp; &lt;td bgcolor="#FFFFFF"&gt;&nbsp; ...

    利用CSS生成精美细线Table表格

    本篇我们将深入探讨如何利用CSS生成精美细线Table表格,以提升网页内容的可读性和美观度。 首先,我们需要了解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素开始,内部包含`&lt;tr&gt;`(行)元素,每行中又有`...

    html制作细线表格的简单实例

    3. 细线表格的视觉原理:当border设置为0,实际上是去掉了表格的边框线,但是通过设置table的背景色和适当的cellspacing,可以让表格背景色通过单元格之间的间隙“泄漏”出来,形成视觉上的细线效果。这样既达到了...

    css 细线表格 css制作table细线表格常用属性

    在CSS中,制作细线表格是一项常见的任务,它可以使数据展示更加清晰且美观。下面将详细介绍如何使用CSS来优化和创建细线表格,以及其中涉及的关键属性。 首先,要实现细线表格,一个非常关键的属性是`border-...

    HTML小技巧:将table边框改为细线

    HTML小技巧:将table边框改为细线 HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线

    WEB标准中细线表格的实现方法

    细线表格是一种美观、清晰的设计风格,使得数据更容易阅读和理解。在本文中,我们将深入探讨如何使用Web标准中的CSS来实现细线表格。 首先,我们要了解`border-collapse`属性,这是实现细线表格的关键。`border-...

    Qt实现高仿excel表格-可执行文件(源码不开放)

    由于源码未开放,我们无法详细分析其内部实现,但可以肯定的是,这个文件与创建和运行高仿Excel表格的应用程序紧密相关。 总的来说,Qt提供了一套强大的工具集,可以用来开发功能丰富的表格应用。通过自定义绘图、...

    CSS制作符合网站标准的细线表格

    本教程将详细介绍如何使用CSS来创建符合Web标准的细线表格,使表格既美观又符合现代网页设计的要求。 首先,我们需要了解CSS中的几个关键属性来实现细线表格的效果。`border`属性用于设置元素的边框,`border-width...

    css创意ul+li实现的细线表格实现代码

    通过使用ul和li标签,可以创建一个细线表格的效果,而不需要使用传统的table标签。 ul和li标签 在HTML中,ul标签用于定义无序列表,而li标签用于定义列表项。在本例中,我们使用ul标签来定义一个无序列表,然后...

    利用CSS生成精美细线Table表格无需复杂style代码

    首先,要创建细线表格,我们需要引入一个预定义了表格样式的CSS文件,例如名为`table.css`的文件。在HTML文档的`&lt;head&gt;`部分,添加以下代码来引入这个CSS文件: ```html ``` 接下来,只需在HTML中创建表格,并为`...

    listview实现表格效果,带表格线

    为了显示表格线,可以在每个TextView的外层包裹一个View,设置其背景为一条细线。 2. **使用GridLayout**:GridLayout允许更灵活的布局,可以直接指定每个子视图的列数和行数。不过,对于复杂的表格布局,...

    第10课 表格边框.doc

    在OpenOffice.org Calc中,表格边框的设置是创建清晰、专业表格的重要步骤,尤其是在打印或展示时。表格边框不仅有助于区分数据区域,还能增强数据的可读性。以下将详细讲解如何在Calc中添加和自定义表格边框。 ...

    杂乱的线条细线PPT背景图片.zip

    标题中的“杂乱的线条细线PPT背景图片.zip”表明这是一个包含用于PPT演示文稿的背景图像的压缩文件。这些背景图像设计的特点是采用了杂乱但有序的线条和细线元素,以营造出独特的视觉效果。在PPT设计中,背景图像的...

    table 细线 样式

    ### Table细线样式的理解和实现 #### 一、概述 在网页设计中,表格(Table)是一种非常重要的布局工具,可以用来展示数据或构建页面结构。对于追求美观和细节的设计师来说,如何设置表格的边框样式尤为重要。本文...

    魔 鬼表格教程经典版

    本教程深入浅出地介绍了多种表格的创建和美化方法,旨在帮助用户熟练掌握不同类型的表格设计,包括但不限于细线表格、虚框表格、立体表格以及表中表等复杂的表格结构。 细线表格是日常工作中常见的一种表格形式,它...

    HTML表格代码

    细线表格可以通过设置border属性来实现,例如: ```html 表格边线为 0,间距为 1,背景色为黑,行背景色为白。 ``` 立体表格可以通过设置border、bordercolorlight、bordercolordark属性来实现,例如: ```...

    网页设计中表格相关使用技巧

    ### 网页设计中表格相关使用技巧 #### 一、引言 在网页设计领域,表格是一个不可或缺的元素,它不仅能够帮助我们组织和展示数据,还能在布局设计上发挥重要作用。本文将探讨网页设计中表格线的相关使用技巧,特别...

Global site tag (gtag.js) - Google Analytics