数据的 (也就是那些以行和列显但是示来体现意义的数据),因此,不要仅仅因为你想把某些内容放在一起而使用表格。 在因特网的初期(也就是几年以前),表格经常被用作网页布局的工具。但是, 如果你要控制文本和图像的显示,还有更酷的方式(提示:即 CSS),有关内容将在后面作详细介绍。 现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、 属性和内容的表格。这也许要令你忙上几个小时。
第 11 课:表格的高级特性
“表格的高级特性”这一标题听起来可能感觉挺枯燥的。但从积极的一面看,当你精通表格后,就再也没有其他有关 HTML 的内容能难住你了。
表格还有哪些相关属性? 表格还有哪些相关属性? colspan 和 rowspan 这两个属性用于创建特殊的表格。 colspan 是“column span(跨列)”的缩写。colspan 属性用在 属性用在
例 1:
单元格 2 | 单元格 3 | 单元格 4 |
该例在浏览器中将显示如下: 单元格 1 单元格 2 单元格 3 单元格 4 该例通过把 colspan 设为“3”, 令所在单元格横跨了三列。如果我们将 colspan 设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行
占据相同的列数。
例 2:
单元格 2 | ||
单元格 3 | 单元格 4 | 单元格 5 |
该例在浏览器中将显示如下: 3单元格 4单元格 5 rowspan 单元格1 单元格 2 单元格 3单元格 4 rowspan 是什么?
可能你已经猜到,rowspan 的作用是指定单元格纵向跨越的行数 的作用是指定单元格纵向跨越的行数。
例 3:
单元格 2 |
单元格 3 |
单元格 4 |
该例在浏览器中将显示如下: 单元 单元格 2 格 3 单元格 4 1, rowspan 被设为“3”, 其 这表示该单元格必须跨越三行 (本 身一行,加上另外两行)。因此,单元格 1 和单元格 2 在同一行,而单元格 3 和单元格 4 形成独立的两行。
上例中的单元格
上例中的单元格 1,其 rowspan 被设为“3”,这表示该单
元格必须跨越三行(本 身一行,加上另外两行)。因此,单元格 1 和单元格 2 在同一行,而单元格 3 和单元格 4 形成独立的两行。 感觉有些迷糊?这确实比较复杂,而且容易出错。因此,在进行 HTML 编码之前, 你最好先在纸上把表格设计好。 明白了?那么你就自己试着用 colspan 和 rowspan 来创建几个表格吧。
页面布局(CSS)
第 12 课:页面布局(CSS)
如果能为页面实现理想的布局,岂不妙哉? 是啊,但如何实现呢?
你可以使用级联样式表( Sheets, CSS) 你可以使用级联样式表(Cascading Style Sheets,简称 CSS)为网站设计页面 布局。本课将对 CSS 作简单介绍。如需从头开始全面学习 CSS 知识,可以使用我布局们提供的 CSS 教程。因此,请将本课当作 CSS 的预备课。 CSS 是 HTML 的搭档。在编码过程中,它们发挥不同的作用:HTML 负责网页的具 HTML 体内容(结构),而 CSS 则修饰网页的表现形式(布局)。 正如第 7 课所讲, 可以用 style 属性将 CSS 内联到网页中。
例如,你可以采用下面的方法来设置文字的字体类型和大小: 例 1:
黑
体;\
该例在浏览器中将显示如下: 这里的文字大小为 20 这里的文字字体为黑体
这里是文字大小为 20、采用黑体的文字
在上例中,我们使用了 style 属性来指定字体类型(font-family)和字体大小 (font-size)。在最后一段中,我们同时进行了字体类型与字体大小的设置,请 注意用分号将它们隔开。
页面布局似乎挺繁琐的?
CSS 有一个优越的特性,即它可以对页面布局进行集中管理 在每个标签里都使用 style 属性;相反,你可以只声明一次,浏览器便会按相应的页面布局效果来显示文本。
例 2: