北京 上海 广州 深圳 >>
网站建设
我们的优势
我们的报价
联系我们
首 页 关于我们 建站套餐 网站优化 网站推广 解决方案 成功案例 客服中心 建站问题 推广知识 建站知识  
网站建设
  网站建设套餐
  网站建设流程
  功能模块介绍
  网页设计报价
  网站改版设计
  网站售后服务
 
最新客户
   
网站推广
推广知识
 
· 浅谈造成网站关键字排名
· 浅谈最近百度调整对网站
· 分析:站内锚文本链接使
· 细节成就权重 权重决定
· 根据百度有效反链数据
· 详解SEO策略制定中的
· 关键词排名优化之挖掘长
 
建站技术知识
 
 
第10课:表格
表格用来显示“表列数据(tabular data)”,也就是那些逻辑上以行和列显示的信息。

表格难学吗?
对于初学者来说,在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),有关内容将在后面作详细介绍。

现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、属性和内容的表格。这也许要令你忙上几个小时。

<
 
在线咨询
     
 
QQ咨询
旺旺咨询
 
MSN咨询
  点击开始咨询 点击开始咨询
  点击开始咨询 点击开始咨询
建站服务
       经济型网站设计套餐 ¥2580
       企业型网站设计套餐 ¥3980
       豪华型网站设计套餐 ¥6580
       商城型网站设计套餐 ¥7580
       定制型网站设计套餐 ¥面 谈
       智赢型ABC ¥1580/1980
虚拟主机
       普及型(电信)350元/年
       经济型(电信)650元/年
       普及A型(双线)500元/年
       普及B型(双线)900元/年
       外贸型(国外) 550元/年
       企业型(国外) 1050元/年
我要订购主机>>       
域名注册
     国际顶级域名.com 100元/年
     国际顶级域名.net 100元/年
     国际顶级域名.cc 380元/年
     国际顶级域名.org 180元/年
     中国顶级域名.cn 100元/年
     中国顶级域名.com.cn 100元/年
     中文域名.中国.公司 280元/年
我要注册域>>       
 友情链接:湖南网站建设 广州网站建设 上海网站建设 广州网站建设公司 中山网站制作 网页设计网 网页设计公司 网站制作 网站建设 建网站公司 珠海网站建设 赢在网络
 业务范围: 广州虚拟主机 广州网站设计 广州网页制作 广州网页设计 深圳网站建设 珠海网页设计 中山网页制作 汕头网站设计 番禺网页制作 南海网站建设 肇庆网页制作

联系我们 | 建站套餐 | 网站建设 | 建设知识 | 服务报价 | 解决方案 | 成功案例 点击开始咨询 点击开始咨询
Copyright 2005-2020 win580.com rights reserved 电话:020-87518743 87518740  传真:020-87518740
地址:广州市天河区中山大道西8号(天河商贸大厦)1304室  邮编:510620
E-mail:Win580@126.com