第10课:表格

表格用来显示那些逻辑上以行和列显示的信息。

表格难学吗?

对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1:

<table>
<tr><td>单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td><td>单元格4</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1 单元格2
单元格3 单元格4

<tr>和<td>有什么区别?

上例可能是到目前为止你见过的最复杂的HTML例子,现在让我们来逐一解释其中的各个标签的含义: 用于创建表格的3个基本元素是:

  • 首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。
  • tr是“table row(表格行)”的缩写,用于表示一行的开始和结束。这也容易理解。
  • td是“table data(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。这些都是容易理解的。

下面是对例1的详细解释。表格以<table>开始,其后的<tr>表明一个新行的开始,这一行中有两个单元格:<td>单元格1</td>和<td>单元格2</td>。该行以</tr>结束,然后紧接着以<tr>另起一行。该行也包含两个单元格,最后整个表格以</table>结束。
直观地讲:行是横向的单元格,列是从纵向的单元格

单元格1 单元格2
单元格3 单元格4

在该表格中,单元格1和单元格2构成一行,单元格1和单元格3构成一列。
虽然上例中的表格只有两行和两列,但实际上,一个表格的行列数是没有限制的。 例2:

<table>
<tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr>
<tr><td>单元格5</td><td>单元格6</td><td>单元格7</td><td>单元格8</td></tr>
<tr><td>单元格9</td><td>单元格10</td><td>单元格11</td><td>单元格12</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1 单元格2 单元格3 单元格4
单元格5 单元格6 单元格7 单元格8
单元格9 单元格10 单元格11 单元格12

表格有可用的属性吗?

表格当然有属性。比如属性border用于指定表格四周边框的厚度: 例3:

<table border="1">
<tr><td>单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td><td>单元格4</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1 单元格2
单元格3 单元格4

表格边框的厚度是以象素(pixels)(参见第九课)为单位来指定的。
与设定图像的显示宽度类似,象素和屏幕百分比也可以用于设定表格宽度: 例4:

<table border="1" width="30%">

该例将在浏览器中显示一个表格,其宽度是屏幕宽度的30%,你可以自己试一下。

表格还有其它属性吗?

表格有很多属性,比如下面这两个:

  • align:指定整个表格、某行或某个单元格里内容的水平对齐方式,比如左对齐、居中或右对齐。
  • valign:指定某个单元格里内容的垂直对齐方式,比如靠上、置中或靠下。

例5:

<td align="right" valign="top">单元格1</td>

可以往表格中插入什么?

理论上,你可以往表格中插入任何东西,诸如文本(text)、链接(links)和图像(images)等等。但是,表格是用来显示表列数据的 (也就是那些以行和列显示来体现意义的数据),因此,不要仅仅因为你想把某些内容放在一起而使用表格。
在因特网的初期(也就是几年以前),表格经常被用作网页布局的工具。但是,如果你要控制文本和图像的显示,还有更酷的方式(提示:即CSS),有关内容将在后面作详细介绍。
现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、属性和内容的表格。这也许要令你忙上几个小时。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/475.html

(5)
江山如画的头像江山如画管理团队
上一篇 2018年1月19日 下午7:52
下一篇 2018年1月19日 下午9:15

99%的人还看了以下文章

  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    6.4K0
  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    3.3K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    5.2K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    6.3K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    12.4K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    3.1K0

发表回复

登录后才能评论