第 10 课:表格 表格用来显示“表列数据(tabular data)” 表格用来显示“表列数据(tabular data)”,也就是那些逻辑上以行和列显示的 信息。 表格难学吗? 表格难学吗? 对于初学者来说,在 HTML 中创建表格似乎比较复杂,不过只要耐心细致地观察, 你就会发现表格实际上与其它 HTML 元素相似,也具有严格的逻辑结构。 例 1: 单元格 1 单元格 2 单元格 3 单元格 4 该例在浏览器中将显示如下: 单元格 1 单元格 2 单元格 3 单元格 4 有什么区别? 和有什么区别? 上例可能是到目前为止你见过的最复杂的 HTML 例子,现在让我们来逐一解释其 中的各个标签的含义: 个基本元素是: 用于创建表格的 3 个基本元素是: 首标签和尾标签分别表示一个表格的开始与结束 这是不难理解。 的。 tr 是“table row (表格行) ”的缩写,用于表示一行的开始和结束。这也容易理解。 td 是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始 和结束。这些都是容易理解的。 下面是对例 1 的详细解释。表格以开始,其后的表明一个新行的开 始,这一行中有两个单元格:单元格 1和单元格 2。该行以 结束,然后紧接着以另起一行。该行也包含两个单元格,最后整个表 格以结束。 直观地 讲:行是横向的单元格,列是从纵向的单元格: 行是横向的单元格,列是从纵向的单元格 行是横向的单元格 单元格 1 单元格 2 单元格 3 单元格 4 在该表格中,单元格 1 和单元格 2 构成一行,单元格 1 和单元格 3 构成一列。 虽然上例中的表格只有两行和两列 但实际上 一个表格的行列数是没有限制的 , , 。 例 2: 单元格 1 单元格 2 单元格 3 单元格 4 单元格 5 单元格 6 单元格 7 单元格 8 单元格 9 单元格 10 单元格 11 单元格 12
该例在浏览器中将显示如下: 单元格 1 单元格 2 单元格 3 单元格 4 单元格 5 单元格 6 单元格 7 单元格 8 单元格 9 单元格 10 单元格 11 单元格 12 表格有可用的属性吗? 表格有可用的属性吗? 表格当然有属性。比如属性 border 用于指定表格四周边框的厚度: 例 3: 单元格 1 单元格 2 单元格 3 单元格 4 该例在浏览器中将显示如下: 单元格 1 单元格 2 单元格 3 单元格 4 表格边框的厚度是以象素(pixels)(参见第九课)为单位来指定的。 与设定图像的显示宽度类似,象素和屏幕百分比也可以用于设定表格宽度: 例 4:
该例将在浏览器中显示一个表格,其宽度是屏幕宽度的 30%,你可以自己试一 下。 表格还有其它属性吗? 表格还有其它属性吗? 表格有很多属性,比如下面这两个: align:指定整个表格、某行或某个单元格里内容的水平对齐方式,比如左对齐、居 中或右对齐。 valign:指定某个单元格里内容的垂直对齐方式,比如靠上、置中或靠下。 例 5: 单元格 1 可以往表格中插入什么? 可以往表格中插入什么? 理论上,你可以往表格中插入任何东西,诸如文本(text)、链接(links)和图 像(images)等等。但是,表格是用来显示表列数据的 (也就是那些以行和列显 但是, 但是 示来体现意义的数据),因此,不要仅仅因为你想把某些内容放在一起而使用表 格。 在因特网的初期(也就是几年以前),表格经常被用作网页布局的工具。但是, 如果你要控制文本和图像的显示,还有更酷的方式(提示:即 CSS),有关内容 将在后面作详细介绍。 现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、 属性和内容的表格。这也许要令你忙上几个小时。
|