|
盲人如何制作网页》第八讲 利用表格技术控制网页结构
将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。html 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加清晰简洁。 html 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。尤其给我们盲人朋友提供了便利,因为在一些网页制作工具中,明眼人朋友可以看到网页元素是否对齐,我们只要掌握了表格技术,对齐网页中的元素将不在是难题。 在这里我们必须掌握表格和单元格这两个制作表格过程中最重要的元素,所为表格就是一张表的最外围的边框所围成的矩形框;单元格则是在表格内分成的小的矩形区域,也就是说单元格是属于表格中的一部分。如果还不清楚我们可以触摸一下盲人专用的象棋棋盘,表格的形状与之基本类似,整个棋盘可以看作我们网页中的一个大表格,而其中的一个个的小格子就相当于单元格了,最外围的边框相当于我们表格的边框,而其内部的这些线条则相当于单元格的边框。我们可以通过代码随意调整表格及单元格的大小及颜色、边框的粗细及颜色等属性,我们所制作的网页内容将在这些单元格内显示。 一、创建基本表格 一个表由<<table>标签开始, </table> 标签结束,表的内容由 <tr> , <th> 和 <td> 定义。<tr> 说明表的一个行,表有多少行就有多少个 <tr> ;<th> 说明表的列数和相应栏目的名称,有多少个栏就有多少个<th> ;<td> 则填充由tr 和 th 组成的表格。用<table> 和 </table>标签建立的称为表格,在其中又分成了许多小格子,我们称之为单元格。我们还可以根据要求用相关的网页内容填充单元格,并把表格的线条粗细的参数设置为“0”,这样看起来网页排列的非常整齐而且还看不到表格中的线条。根据上面给出的条件我们就可以制作一个最简单的表格了,请看下面的例子: <table border=1> <tr> <td> 这是只有一个单元格的表格</td> </tr> </table> 实例解析: 上例中在 <table>标签中的 border=1 这是设置表格线条粗细的属性,我们可以把其参数设置为0,以不显示表格;<tr>为换行标签,<td> 表示一个单元格的开始,</td>表示一个单元格的结束。 在一个表格中需要有许多个单元格,以放置网页元素,那么请看下面的例子: <table border=1> <tr> <td> 单元格1</td> <td> 单元格2</td> </tr> <tr> <td> 单元格3</td> <td> 单元格4</td> </tr> <tr> <td> 单元格5</td> <td> 单元格6</td> </tr> </table> 实例解析: 上例中我们把表格分成三行,其中每行有两个单元格,当然我们也可以根据要求设置为更多的单元格,如果我们在每一个单元格中设置一个链接的话,我们盲人朋友通过按TAB_键切换的时候,读屏软件读出的顺序将是在一行中自左向右读出每一个单元格中的链接名称,一行读完后再读出下一行中的链接。 二、 调整表格及单元格的属性 1、 调整表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色,请看下面的实例: <table border="3" width="300" height="200" bordercolor="#FF0000"> <tr> <td width="200" height="80"> </td> <td bordercolor="#0000FF"> </td> </tr> </table> 实例解析: 表格及单元格的宽度和高度都是使用 width(宽度) 和 height(高度) 这两个属性进行控制的,上例中的bordercolor="颜色代码" 则是调整表格及单元格颜色的。 2、 表格的水平摆放位置 我们所制作的一张网页中有的时候需要多个表格的情况,可以对其居左、居右和居中的排列,请看下面的实例:
责任编辑:
读者评论:
发表评论:
相关文章:
|